HTML5

The web is the most popular feature of the Internet and HTML is the backbone of the web. Everything that we see on the web is used with HTML. All fancy web technologies either generate or manipulate HTML in different ways.

HTML is easy to learn and use. You don't need to learn programming to learn HTML5. It is a markup language i.e. it does not control data flow or apply logic. It simply formats content.

You can create a website by typing HTML but no one does this anymore. Any serious website is either generated from some framework, tool, or Content Management System. Even though you don't have to type in all the HTML, you still need to understand HTML to be able to make great websites.

To follow along and run the examples, you need:

  1. A computer with a browser (Chrome, Firefox, Safari, IE)
  2. A plain text editor. I recommend you download notepad++ for windows or Sublime if you are using a Mac.

What is HTML

HTML are initials that stand for HyperText Mark-up Language.

  • Hyper is the opposite of linear. It used to be that computer programs had to move in a linear fashion. HTML does not hold to that pattern and allows the person viewing the World Wide Web page to go anywhere, anytime they want.
  • text needs no explanation
  • Mark-up is what you will do. You will write in plain English and then mark-up what you wrote.
  • Language is simple enough too.

Editor

When writing HTML code, you should choose an editor which has very few or no fonts. Something like Notepad++ or Sublime. These fonts could interfere with your code. To type your HTML code:

  1. Open a new document in your editor
  2. Type the HTML code.
  3. Save the document with a ".html" extension.

When you save your document in WORD, or some other word processor format, other than text, you are saving much more than just the letters on the page. You're saving the margin settings, the tab settings, specific fonts, and a whole lot of other setting the page needs to be displayed correctly. You don't want all of that. You just want the text. Plain text editor do not add anything extra to the text.

Opening the Document in the Browser

Drag and drop the HTML file in your browser or simply, click on File > Open and browse to your html file.

Text Formatting

Formatting text involves many different things, so there are many different tags. None of the tags in HTML are case sensitive so you should not worry whether the tag is in capital letters or not. Below is a list of tags, their syntax, and description:

<p>text<p> This tag is for paragraph. Whenever you are starting a new paragraph, start the paragraph with this tag. It will leave one line blank so as to indicate that the following is a new paragraph. <p> tag does not require a </p> tag.

<br> This tag is used whenever you want to leave a line blank. Wait a minute, doesn't the <P> tag do just that? Yes and No. Yes, it leaves a blank line. Now suppose you want to leave two lines blank. The logical thing to do would be to type <P> twice or <br> twice or each exactly once. <P><br> or <br><P> will give you two blank lines, <br><br> would give you two blank lines, but <P><P> will give you only one line. The reason being that two paragraphs do not need to have more than a blank line in between them. So, now you can rest assured that <br> has its purpose and use. There is no </br> tag so it is not used.

<hr> This tag is used to draw a horizontal line like the one below the heading of this page. It also does not require an ending tag </hr>.

<center>text</center> center aligns the content

Nesting Tags Tags can be nested when it makes sense.

<b>bold</b> applies bold format to text 
<i>italics</i> applies italics format to text
<b><i>italics</i></b> applies both bold and italics to text

Reference Table You do not have to memorize all these tags. Just consult a reference document. Following table provides some tags for reference. http://www.w3schools.com/tags/ provides a better reference.

Item
Syntax
What it does
<b>
<b> bold </b>
make the text bold
<i>
<i> italics </i>
italicizes the text within
<TT>
<tt> Typewriter Text </tt>
Typewriter Text
<blink>
<blink> blinking text </blink>
blinking text
<sup>
<sup> superscript </sup>
superscript
<sub>
<sub> subscript </sub>
subscript
<strike>
<strike> strikethrough </strike>
strikethrough
<nobr>
<nobr> nonbreaking </nobr>
nonbreaking
<u>
<u> underline </u>
underline
<p>
<p> or <p align="right"> </p>
start a paragraph
<br>
<br>
leaves one line blank
<hr>
<hr>
make a horzontal line
<center>
<center></center>
center the text
<align>
<align="left"> </align>
aligns the text according to the attribute

Images

Internet is full of images. It is very easy to download those images. All these images are protected by copyright laws. So unless someone gives you permission to use their images on your website, you should not use them on your website.

Image Formats: There are many image formats but only three are commonly used on the web. These three are png, jpg, and gif. Most pictures or graphics that you post on your page would have one of these three in it. The syntax:

<img src="xyz.gif">

To post an image you have to use the <img> tag. <img> tag is never used alone and there is no </img> tag. It is always used with an attribute. Src stands for source (source of the image). Inside the quotation marks, you have to input the source (or location) of the image file. In this case, the image file is in the same directory as this html file, so I just type the name of the file. If the file is in a subdirectory, then you have to type the name of the subdirectory / name of the file. For example, if the image is in the images directory:

<img src="images/xyz.gif"> 

You can also use a full URL, even of someone else's website. Once again don't do this without permission

<img src="http://example.com/logo.png">

Pictures align to the left of the page by default. To align them differently, you can use align and center.

<img align="right" src="images/logo.jpg"> 
<center><img src="images/logo.jpg"></center> 
<img align="left" src="images/logo.jpg> 

To arrange text around the image, you can use:

<img align="middle" src="images/logo.jpg">This text is on the middle right side of the picture. 
<img align="bottom" src="images/logo.jpg">This text is on&nbsp; the bottom right side of the picture. 

There is a lot more to cover in images. In almost all sizeable websites, image formatting is handled by CSS. It is therefore recommended that you save you time here and invest it in learning how to format images in CSS later.

Tables

There was a time when tables formed the structure of every website. Today with advancement and widespread use of div tags and CSS, tables are usually only used to create tables.


Look at the table below and its HTML code on the right:
 

Table1
row # 1, column # 1 row # 1, column # 2
row # 2, column # 1 row # 2, column # 2
row # 1, column # 1 row # 1, column # 2
row # 2, column # 1 row # 2, column # 2
Table2




 
<table background="backMain.jpg"> 
<caption> Table1 </caption> 
   <tr> 
      <td> row # 1, column # 1 </td> 
      <td> row # 1, column # 2 </td> 
   </tr> 
   <tr> 
      <td> row # 2, column # 2 </td> 
      <td> row # 2, column # 2 </td> 
   </tr> 
</table>

Every table starts with a <table> and ends with a </table>. <caption> is table's version of heading. <caption> can be aligned as in this example below:

Table1
Table2
<table background="images/backMain.jpg"> 
<caption> Table </caption>
   <tr> 
      <td> row # 1, column # 1 </td> 
      <td> row # 1, column # 2 </td> 
   </tr> 
   <tr> 
      <td> row # 2, column # 2 </td> 
      <td> row # 2, column # 2 </td> 
   </tr> 
</table>
<table bgcolor="666666"> 
   <tr> 
      <td> row # 1, column # 1 </td> 
      <td> row # 1, column # 2 </td> 
   </tr> 
   <tr> 
      <td> row # 2, column # 2 </td> 
      <td> row # 2, column # 2 </td> 
   </tr> 
   <caption align=bottom> Table2 </caption>
</table>

<

p>Notice that the the align attribute is used in Table2 and <caption> is located just above </table>.

If you want a cell to occupy 2 cells, you need to use rowspan attribute. To occupy two columns, use colspan attribute. See example:

<td rowspan="2">
<td colspan="3">

Instead of having to type all the table code, you can use a table generator such as http://www.tablesgenerator.com/html_tables. Copy/paste or type your text and it will generate the HTML for it. Try different things like changing color, sizes, and alignment with cell and see the code that is generated.

Links

HTML uses the <a> (anchor) tag to create a link to another document.

An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.

The syntax of creating an anchor: 

<a href="url">Text to be displayed</a>

The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.

This anchor defines a link to W3Schools:

<a href="http://www.w3schools.com/">Visit W3Schools!</a>

The line above will look like this in a browser:

Visit W3Schools!


The Target Attribute

With the target attribute, you can define where the linked document will be opened.

The line below will open the document in a new browser window:

<a href="http://www.w3schools.com/"
target="_blank">Visit W3Schools!</a>



The Anchor Tag and the Name Attribute

The name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly into a specific section on a page, instead of letting the user scroll around to find what he/she is looking for.

Below is the syntax of a named anchor:

<a name="label">Text to be displayed</a>

The name attribute is used to create a named anchor. The name of the anchor can be any text you care to use.

The line below defines a named anchor:

<a name="tips">Useful Tips Section</a>

You should notice that a named anchor is not displayed in a special way.

To link directly to the "tips" section, add a # sign and the name of the anchor to the end of a URL, like this:

<a href="http://www.w3schools.com/html_links.asp#tips">
Jump to the Useful Tips Section</a>

A hyperlink to the Useful Tips Section from WITHIN the file "html_links.asp" will look like this: 

<a href="#tips">Jump to the Useful Tips Section</a>

Forms

Forms

On your website, for the most part, you the host do the talking and the viewers do the listening. Sometimes, however, you would want to hear from your viewers. Sometimes you want specific information from your viewers. Information like, their email address, how often they visit, their age, etc. For this you should use forms.

<form method="post" action="mailto:sciences@molecularsciences.org">

Each form starts with the <form> tag and ends with </form>. Method="post" tells the browser that you want to post this form. Action="mailto:sciences@molecularsciences.org" tells the browser that all the information collected from this form will be mailed to this address. You can put any email address inside the action but be careful not to leave any space between mailto: and the email address.

Textbox

Textbox is a small box of a defined size where the viewer can type something.

Name: <input type="text" name="name" size="30">

Name:

The attribute type gets text to specify that this is a text box. The attribute name is very important. When you will receive something from the person who mailed you some information, you will get a chunk of unformatted text. For example if someone sent you their name and email, you will receive something like: (MrSizzler)(MrSizzler@usa.net)(I think that your site is ...). This mail can very easily become very confusing. If you, however, use name attribute you will get something like name=(MrSizzler) email=(MrSizzler@usa.net),etc. The size attribute defines how many characters long the box is.

Radio Buttons

The radio buttons allow the user to either choose or not choose an item. This could become useful in many situations. For example you want the gender of the viewer.

Male <input type="radio" name="selection" value="item">
Female <input type="radio" name="selection" value="item">
Selection

Male  Female 

Notice that the user can either choose Male or Female but not both. That makes sense. Notice that inside the input tag, value of type is now "radio". This tells the browser to draw a radio button here. One tag for each button. Notice that the values for name and selection are the same.

Married <input type="radio" name="common" value="item">
Male <input type="radio" name="condradictory" value="item">
Female <input type="radio" name="contradictory" value="item">

Married  Male  Female

Note that now you can choose married and male or married and female but not male and female at the same time. This is because male and female are assigned the same name in the input tag but married is assigned a different name. The trick is that you can only choose one item from with the same name in the input tag at a time.

Checkboxes

Checkboxes are another form of radio. Actually, it isn't, it just performs a function very similiar to them. Unlike radio buttons, checkboxes are boxes (square in shape) and when you click on them, you do get a black dot, but an 'X' or a checkmark depending on the brand and version of your browser. You can click on more on options in the checkboxes below. Try and see if you can make an option contradictory to another. In other words, if you choose cocoa, you can not choose nutmeg.

<input type="checkbox" name="extras" value="cinnamon"> Cinnamon
<input type="checkbox" name="extras" value="nutmeg"> Nutmeg
<input type="checkbox" name="extras" value="cocoa"> Cocoa
<input type="checkbox" name="extras" value="sugar"> Sugar

Cinnamon Nutmeg Cocoa Sugar 

Textbox

Textboxes are very useful and are found in almost every form on the website. They allow the viewer to give comments and information which they could not in other fields of the form.  Here is how to make a textbox.

<textarea name="comments" rows=10 columns =30 wrap> default text <textarea>


Note that unlike <input>, <textarea> has an ending tag. The name field is the same and the name field of  <input>. Rows, and columns attributes defines size of the textfield. Numbers refer to the length in characters. Default is 1 row and 40 columns.
Wrap  is an optional attribute which allows word-wrapping. If you do not use this attribute, the user will have to hit return.

Lists

Lists

HTML provides three different kind of lists. Bear in mind that there is no <list> tag.

Ordered Lists:
 

Sports Car:
<ol>
 <li> Porsche
 <li> Lambourgini
 <li> BMW
</ol>
Sports Car:
  1. Porsche
  2. Lambourgini
  3. BMW

Ordered lists start with <ol> and end with </ol>. <li> marks each listing. By default, lists created with <ol> use arabic numerals starting with 1. That can be changed.
<ol type = A> Number list A, B, C, D
<ol type = a>  Number list a, b, c, d
<ol type = I> Number list I, II, III, IV
<ol type = i> Number list i, ii, iii, iv
<ol type = 10> Number list 10, 11, 12, 13

If you want to pick something out of hte blue, you can use the value attribute:
 

<ol start = 101>
 <li> html
 <li> javascript
 <li value=14> cgi
 <li> java
</ol>
  1. html 
  2. javascript 
  3. cgi 
  4. java 

Note that the value attribute placed a 14 in a pattern of 101, 102,.... Also take a look at the item after 14. What do you think happened?

Unordered Lists:
 

Cats:
<ul>
   <li> Lions
   <li> Tigers
   <li> Pumas
   <li> Leopards
</ul>
Cats: 
  • Lions 
  • Tigers 
  • Pumas 
  • Leopards 

The only difference between ordered and unordered lists is that the unordered lists use bullets instead of alphanumeric characters. You do, however, have a few choices regarding the shape of the bullets.
 

<ul>
   <li type = disk> disk
   <li type = space> space
   <li type = circle> circle
</ul>
Note: newer browsers do not support some of these functionalities.
  • disk 
  • space 
  • circle 

Definition Lists:

Definition lists are useful for tasks like defining terms.
 

<h3> Glossary </h3>
<dl>
<dt> Alphanumeric:
<dd> Alpha is short for alphabet and numeric refers to numerals. So, alphanumeric characters simply mean letters and numbers.
<dt> Binary:
<dd> Binary is a base-2 numbering system. It means that it uses only two characters (0 and 1) to represent numbers.
<dt> Hexadecimal:
<dd> Hexadecimal is a base-16 numbering system. The characters are 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.
</dl>

Glossary 

Alphanumeric: 
Alpha is short for alphabet and numeric refers to numerals. So, alphanumeric characters simply mean letters and numbers. 
Binary: 
Binary is a base-2 numbering system. It means that it uses only two characters (0 and 1) to represent numbers. 
Hexadecimal: 
Hexadecimal is a base-16 numbering system. The characters are 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. 

Definitive lists (another name for definition lists) start with <dl> and end with </dl>. <dt> is the heading and <dd> is the detail.

Can you mix the three lists? Yes. You can also list tables and images but I haven't seen any website do this skillfully. If you manage to create a great effect by listing images/tables, please do email me the URL.

Technologies: