CSCE 120

HTML

Source: youtube.com

HTML (Hypertext Markup Language) is not a programming language; it is a markup language used to tell the user agent (often a browser) how to structure web pages. At the atomic level, HTML is a made of HTML elements also knows as HTML tags.

Background

  • In 1990 First specification of HTML
  • In 1995 HTML 2.0
  • In 1996 W3C - World Wide Web Consortium
  • In 1997 W3C Recommendation for HTML 3.2 Jan
  • In 1997 W3C Recommendation for HTML 4.0 Dec
  • In 1999 W3C Recommendation for HTML 4.01
  • ---- XHTML ------
  • In 2014 W3C Recommendation: HTML5
  • HTML5 becomes Living Standards = no more versions???

What is available in HTML5: https://platform.html5.org/

Not all features are implemented by your browser

HTML Page Structure

HTML Page Structure Image

Every web page needs to have the above tags.

<!DOCTYPE html>
Specifies the document. This tag, is not an html tag, but tells the browser what version of HTML the document uses. This was introduced with HTML5.

Old web pages may still have something like this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Feel free to replace with <!DOCTYPE html> as all browser now understand the difference. 

<html> </html>
This element wraps all the content on the entire page and is also known as the root element. 

<head> </head>
This tag's job is to contain metadata about the document. The content in this tag is known as meta tags and not displayed on the page. This includes things like character set declarations, keywords and page description, CSS for style, and more.

Below are the two most important meta tags:

  • <meta charset="utf-8" /> : This element sets the character set the document should use to UTF-8.
  • <title> </title> : This element sets the title of your page. When you bookmark or add a page to favorite, this title appears.

Meta Data

Click on these links to see more meta data and how they are used.


    <meta charset="UTF-8">
    <!-- gives instructions to the browser on how to control the page's dimensions and scaling -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="CSCE 120. Learning to Code">
    <meta name="keywords" content="HTML,CSS,JavaScript">
    <meta name="author" content="Tony Arslan">


    <meta charset='UTF-8'>
    <meta name='keywords' content='your, tags'>
    <meta name='description' content='150 words'>
    <meta name='subject' content='your website' s subject'>
    <meta name='copyright' content='company name'>
    <meta name='language' content='ES'>
    <meta name='robots' content='index,follow'>
    <meta name='revised' content='Sunday, July 18th, 2010, 5:15 pm'>
    <meta name='abstract' content=''>
    <meta name='topic' content=''>
    <meta name='summary' content=''>
    <meta name='Classification' content='Business'>
    <meta name='author' content='name, email@hotmail.com'>
    <meta name='designer' content=''>
    <meta name='reply-to' content='email@hotmail.com'>
    <meta name='owner' content=''>
    <meta name='url' content='http://www.websiteaddrress.com'>
    <meta name='identifier-URL' content='http://www.websiteaddress.com'>
    <meta name='directory' content='submission'>
    <meta name='pagename' content='jQuery Tools, Tutorials and Resources - O' Reilly Media'>
    <meta name='category' content=''>
    <meta name='coverage' content='Worldwide'>
    <meta name='distribution' content='Global'>
    <meta name='rating' content='General'>
    <meta name='revisit-after' content='7 days'>
    <meta name='subtitle' content='This is my subtitle'>
    <meta name='target' content='all'>
    <meta name='HandheldFriendly' content='True'>
    <meta name='MobileOptimized' content='320'>
    <meta name='date' content='Sep. 27, 2010'>
    <meta name='search_date' content='2010-09-27'>
    <meta name='DC.title' content='Unstoppable Robot Ninja'>
    <meta name='ResourceLoaderDynamicStyles' content=''>
    <meta name='medium' content='blog'>
    <meta name='syndication-source' content='https://mashable.com/2008/12/24/free-brand-monitoring-tools/'>
    <meta name='original-source' content='https://mashable.com/2008/12/24/free-brand-monitoring-tools/'>
    <meta name='verify-v1' content='dV1r/ZJJdDEI++fKJ6iDEl6o+TMNtSu0kv18ONeqM0I='>
    <meta name='y_key' content='1e39c508e0d87750'>
    <meta name='pageKey' content='guest-home'>
    <meta itemprop='name' content='jQTouch'>
    <meta http-equiv='Expires' content='0'>
    <meta http-equiv='Pragma' content='no-cache'>
    <meta http-equiv='Cache-Control' content='no-cache'>
    <meta http-equiv='imagetoolbar' content='no'>
    <meta http-equiv='x-dns-prefetch-control' content='off'>

Source: https://gist.github.com/whitingx/3840905#file-meta-tags-md 


    <meta name='og:title' content='The Rock'>
    <meta name='og:type' content='movie'>
    <meta name='og:url' content='http://www.imdb.com/title/tt0117500/'>
    <meta name='og:image' content='http://ia.media-imdb.com/rock.jpg'>
    <meta name='og:site_name' content='IMDb'>
    <meta name='og:description' content='A group of U.S. Marines, under command of...'>

    <meta name='fb:page_id' content='43929265776'>
    <meta name='application-name' content='foursquare'>
    <meta name='og:email' content='me@example.com'>
    <meta name='og:phone_number' content='650-123-4567'>
    <meta name='og:fax_number' content='+1-415-123-4567'>

    <meta name='og:latitude' content='37.416343'>
    <meta name='og:longitude' content='-122.153013'>
    <meta name='og:street-address' content='1601 S California Ave'>
    <meta name='og:locality' content='Palo Alto'>
    <meta name='og:region' content='CA'>
    <meta name='og:postal-code' content='94304'>
    <meta name='og:country-name' content='USA'>

    <meta property='fb:admins' content='987654321'>
    <meta property='og:type' content='game.achievement'>
    <meta property='og:points' content='POINTS_FOR_ACHIEVEMENT'>

    <meta property='og:video' content='http://example.com/awesome.swf'>
    <meta property='og:video:height' content='640'>
    <meta property='og:video:width' content='385'>
    <meta property='og:video:type' content='application/x-shockwave-flash'>
    <meta property='og:video' content='http://example.com/html5.mp4'>
    <meta property='og:video:type' content='video/mp4'>
    <meta property='og:video' content='http://example.com/fallback.vid'>
    <meta property='og:video:type' content='text/html'>

    <meta property='og:audio' content='http://example.com/amazing.mp3'>
    <meta property='og:audio:title' content='Amazing Song'>
    <meta property='og:audio:artist' content='Amazing Band'>
    <meta property='og:audio:album' content='Amazing Album'>
    <meta property='og:audio:type' content='application/mp3'>

Source: https://gist.github.com/whitingx/3840905#file-meta-tags-md 


    <meta name="apple-mobile-web-app-title" content="My App"> <!-- New in iOS6 -->
    <meta name='apple-mobile-web-app-capable' content='yes'>
    <meta name='apple-touch-fullscreen' content='yes'>
    <meta name='apple-mobile-web-app-status-bar-style' content='black'>
    <meta name='format-detection' content='telephone=no'>
    <meta name='viewport' content='width=device-width; content='width = 320; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes; target-densitydpi=160dpi'>

    <link href='/apple-touch-icon.png' rel='apple-touch-icon' type='image/png'>
    <link href='touch-icon-ipad.png' rel='apple-touch-icon' sizes='72x72'>
    <link href='touch-icon-iphone4.png' rel='apple-touch-icon' sizes='114x114'>
    <link href='/startup.png' rel='apple-touch-startup-image'>

    <link href='http://github.com/images/touch-icon-iphone4.png' sizes='114x114' rel='apple-touch-icon-precomposed'>
    <link href='http://github.com/images/touch-icon-ipad.png' sizes='72x72' rel='apple-touch-icon-precomposed'>
    <link href='http://github.com/images/apple-touch-icon-57x57.png' sizes='57x57' rel='apple-touch-icon-precomposed'>

Source: https://gist.github.com/whitingx/3840905#file-meta-tags-md 


    <meta http-equiv='Page-Enter' content='RevealTrans(Duration=2.0,Transition=2)'>
    <meta http-equiv='Page-Exit' content='RevealTrans(Duration=3.0,Transition=12)'>
    <meta name='mssmarttagspreventparsing' content='true'>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
    <meta name='msapplication-starturl' content='http://blog.reybango.com/about/'>
    <meta name='msapplication-window' content='width=800;height=600'>
    <meta name='msapplication-navbutton-color' content='red'>
    <meta name='application-name' content='Rey Bango Front-end Developer'>
    <meta name='msapplication-tooltip' content='Launch Rey Bango' s Blog'>
    <meta name='msapplication-task' content='name=About;action-uri=/about/;icon-uri=/images/about.ico'>
    <meta name='msapplication-task' content='name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico'>
    <meta name='msapplication-task' content='name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico'>
    <meta name='msapplication-task' content='name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico'>
    <meta name='msvalidate.01' content='6E3AD52DC176461A3C81DD6E98003BC9'>
    <meta http-equiv='cleartype' content='on'>

Source: https://gist.github.com/whitingx/3840905#file-meta-tags-md 


    <meta name='microid' content='mailto+http:sha1:e6058ed7fca4a1921cq91d7f1f3b8736cd3cc1g7'>
    <meta name='readability-verification' content='E7aEHvVQpWc8VHDqKvaB2Z58hek2EAv2HuLuegv7'>
    <meta name='google-site-verification' content='4SMIedO1X4IkYrYuhEC2VuovdQM36Xxb0btUjElqQyg'>
    <meta name='ICBM' content='40.746990, -73.980537'>
    <meta name='generator' content='WordPress 3.3.1'>
    <meta name='norton-safeweb-site-verification' content='tz8iotmk-pkhui406y41y5bfmfxdwmaa4a-yc0hm6r0fga7s6j0j27qmgqkmc7oovihzghbzhbdjk-uiyrz438nxsjdbj3fggwgl8oq2nf4ko8gi7j4z7t78kegbidl4'>

Source: https://gist.github.com/whitingx/3840905#file-meta-tags-md

Use custom meta tags to store data that you need in Javascript, instead of hard-coding that data into Javascript file


    <meta name='google-analytics' content='1-AHFKALJ'>
    <meta name='disqus' content='abcdefg'>
    <meta name='uservoice' content='asdfasdf'>
    <meta name='mixpanel' content='asdfasdf'>

Source: https://gist.github.com/whitingx/3840905#file-meta-tags-md 


    <!-- Twitter(card) -->
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@nytimesbits" />
    <meta name="twitter:creator" content="@nickbilton" />

    <!-- TweetMeme Meta Tags -->
    <meta name='tweetmeme-title' content='Retweet Button Explained'>

    <!-- Google Meta Tags -->
    <meta name="news_keywords" content="University of Nebraska Computer Science">

    <!-- Blog Catalog Meta Tags -->
    <meta name='blogcatalog'>

    <!-- Rails Meta Tags -->
    <meta name='csrf-param' content='authenticity_token'>
    <meta name='csrf-token' content='/bZVwvomkAnwAI1Qd37lFeewvpOIiackk9121fFwWwc='>

Source: https://gist.github.com/whitingx/3840905#file-meta-tags-md

The Document Body Element

<body> </body>
This element contains everything you want your users to see on page. The <body> </body> element represents the content of an HTML document which may include text, images, audio, videos, games, and more. In other words, every HTML element needs to between <body> and </body> tags.

In this section we will introduce several basic HTML tags. The words tag and element will be used synonymously in the context of the HTML document.

This element is, arguably, the reason for the web, which is the ability to link documents. It allows the developer to create hyperlinks to other web pages, files, locations within the same page, email addresses, or any other URL. Also known as the anchor element. The href is required and responsible for doing all the work. 


    <a href="https://cse.unl.edu" target="_blank" title="Go to UNL web site"> Website <a>
    <a href="mailto:help@unl.edu" title="Email Us"> Email <a>
    <a href="tel:+14024722401" title="Call us for help"> Phone <a>
Example

You may reach us at:

Places an image into the document. The position of the element may be effected but the content of the image is not affected by the current document's styles. These elements are known as replaced elements. 

<img src="~/images/cat-george.jpg" class="img-fluid" alt="My Orange Tabby Cat Named George" />
Example
My Orange Tabby Cat Named George 
<h1> Learning to Code </h1>

Learning to Code - <h1>

Learning to Code - <h2>

Learning to Code - <h3>

Learning to Code - <h4>

Learning to Code - <h5>
Learning to Code - <h6>
<p> This is some text in a paragraph. </p>

Browsers automatically add some space (margin) before and after each <p> element

. 

<div> anything can go here, including other tags. </div>
<span> anything can go here, including other tags.. </span>
The <div> element is often used as a container for other elements. By default, It starts on a new line, and takes up the whole width (like <p>).

<span> is much like a <div > however it displays on the same line and does not take the whole width.

This is some text in a <div>

This is some text in a <p>

This is some text in a <span> 

<table>
    <thead>
        <tr>
            <th>#</th>
            <th>First</th>
            <th>Last</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>18</td>
        </tr>
        <tr>
            <th>2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>20</td>
        </tr>
        <tr>
            <th>3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>21</td>
        </tr>
    </tbody>
</table>
# First Last Age
1 Mark Otto 18
2 Jacob Thornton 20
3 Larry the Bird 21

Ordered List


<ol>
    <li>Computer Science</li>
    <li>Chemistry</li>
    <li>Physics</li>
</ol>
<ol start="50">
    <li>Computer Science</li>
    <li>Chemistry</li>
    <li>Physics</li>
</ol>
  1. Computer Science
  2. Chemistry
  3. Physics
  1. Computer Science
  2. Chemistry
  3. Physics

Unordered List


<ul>
    <li>Computer Science</li>
    <li>Chemistry</li>
    <li>Physics</li>
</ul>
  • Computer Science
  • Chemistry
  • Physics

<form>
    <input type="text" id="firstName" placeholder="First name" value="Tony" required>
    <input type="text" id="lastName" placeholder="Last name" value="Arslan" required>
    <input type="text" id="userName" placeholder="Username" required>

    <input type="email" id="emailAddress" placeholder="Email">
    <input type="password" id="password" placeholder="Password">
    <input type="text" id="address" placeholder="1234 Main St">
    <input type="text" id="ddress2" placeholder="Apartment, studio, or floor">
    <input type="text" id="inputCity">

    <label for="inputState">State</label>
    <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option value="NE">Nebraska</option>
        <option value="IA">Iowa</option>
        <option value="CO">Colorado</option>
    </select>

    <input type="text" id="inputZip">

    <input type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
    <input type="radio" name="gridRadios" id="gridRadios2" value="option2">
    <input type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>

    <input type="checkbox" id="gridCheck">
    <input type="checkbox" id="gridCheckTwo">

    <label>Single Select</label>
    <select id="singleSelect">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
    <label>Multiple Select</label>
    <select multiple id="multiSelect">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>

    <label for="Textarea1">Textarea</label>
    <textarea id="Textarea1" rows="3"></textarea>

    <label for="fileInput">File Input</label>
    <input type="file" class="form-control-file" id="fileInput">

    <button type="submit" class="btn btn-primary"> Submit </button>
</form>
@
Please choose a username.
Radios
Checkbox

HTML Editor(s)

Any text editor can be utilized for developing html files such as Notepad, Notepad++
Specialized HTML editors offer convenience and added functionality which handles HTML, as well as related technologies such as CSS, XML and JavaScript.
In this class we will demonstrate Notepad, Notepad++ and Visual Studio which is more than just an editor.
Below is a list of several well known editors
Exercise 1
Building Your First HTML Page
Instructions
Exercise One
Graded
No

Solution and discussion In class.

HTML5 Elements

HTML5 introduced numerous new elements to define semantic / structural elements: Text-formatting instructions, form controls, input types, JavaScript APIs and more. These elements are feature rich, however they do not add any new distinctive behavior to the page itself. Rather, they describe the content of the page. This concept is very critical if your site is relying on Search Engines for revenue. The idea is that your site will be viewed by more users if it is discovered by the search engines and ranked well. The concept of Search Engines and Search Engine Optimization (SEO) is beyond the scope of this class.

Important Semantic Elements

  • main
  • header
  • footer
  • nav
  • section
  • article
  • aside
  • figcaption
  • figure
  • canvas
  • math
  • mark
  • meter
  • details
  • summary
  • time

Input Type Elements

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Input Attributes

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

Multimedia Elements

  • audio
  • video
  • source
  • embed
  • track

<!DOCTYPE html>
<html>
<body>
    <header>
        <nav>...</nav>
    </header>
    <main>
        <article>
            <section>...</section>
            <aside>...</aside>
        </article>
    </main>
    <footer>
        <nav>...</nav>
    </footer>
</body>
</html>

HTML Attributes

Attributes are used to either modify the default functionality of an element or to provide additional information about an element. While most attributes are optional, some elements have required attributes. While some attributes need to be unique for elements in page, some may be shared by several elements. 


    <element attribute="value">element content</element>

Elements can have zero to several attributes. Developers can also create their own attributes. Below are frequently used attributes.

  • id provides a document(page) level unique identifier for an element
  • class provides the ability to classify elements with the same semantics
  • style used to add semantics to a particular element
  • href specifies the web address that the link points to; where the browser navigates to when the link is clicked. required for <a></a> tag
  • title provides extra information

For a comprehensive list, check out https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes 


<a>

<abbr>

<address>

<area>

<article>

<aside>

<audio>

<b>

<base>

<bdi>

<bdo>

<blockquote>

<body>

<br>

<button>

<canvas>

<caption>

<cite>

<code>

<col>

<colgroup>

<data>

<datalist>

<dd>

<del>

<details>

<dfn>

<dialog>

<div>

<dl>

<dt>

<em>

<embed>

<fieldset>

<figure>

<footer>

<form>

<h1>

<h2>

<h3>

<h4>

<h5>

<h6>

<head>

<header>

<hgroup>

<hr>

<html>

<i>

<iframe>

<img>

<input>

<ins>

<kbd>

<keygen>

<label>

<legend>

<li>

<link>

<main>

<map>

<mark>

<menu>

<menuitem>

<meta>

<meter>

<nav>

<noscript>

<object>

<ol>

<optgroup>

<option>

<output>

<p>

<param>

<pre>

<progress>

<q>

<rb>

<rp>

<rt>

<rtc>

<ruby>

<s>

<samp>

<script>

<section>

<select>

<small>

<source>

<span>

<strong>

<style>

<sub>

<summary>

<sup>

<table>

<tbody>

<td>

<template>

<textarea>

<tfoot>

<th>

<thead>

<time>

<title>

<tr>

<track>

<u>

<ul>

<var>

<video>

<wbr>

Also
<!–- Comment -–>

Type specification
<!DOCTYPE html>
Assignment
Nested Elements
Instructions
Assignments 1
Graded
Yes

Solution will be discussed in the class.

HTML is not a Programming Language

HTML stands for Hyper Text Markup Language which is a plain-text, human readable language that is used for representing content on the web.

HTML specifies how to structure the content but not how to display.

The browser decides how to display the content. Not all browsers display elements the same, some browsers will display some elements differently.

HTML is made of a lot of elements, also known as tags.

HTML is not responsible for the appearance of the web content. What is responsible for the appearance?