HTML 101

By:

George Owings ;
HTML and CSS ( Hypertest Markup Language) and (Cascading Style Sheets)

At first we will  concentrate on html and then gradually introduce CSS into the codes. These two go together. You MUST learn basic HTML before you start CSS. You can learn enough html in a few days to be able to add a small bit of CSS to your web pages.

You will need some way to edit your code as you write it.
 Use note pad or word pad to type your code if you have a PC, If you have a Mac use teachtext. When you get ready to check your code change the .txt ending of your file to html then open and review how it will look in the browser. If you leave your file open after you save it you will still be able to add or change code then save and view it on the browser;
If you wish to type your code directly into an editor two of my free favorites are listed below.; If you have images, videos or url links you should use the above method where you can locate your images in your code.


https://jsfiddle.net takes you to

//jsfiddle.net/

Editor     You can also use the editor at this website to test your codetakes you to https://www.w3schools.com/html/tryit.asp?filename=try html_basic_document
In many cases you will be copy-pasting my code examples into one of the editors to alter and check them.  Save your examples into an organized folder to study.  They will come in handy if you apply for certification later on. Don't foget to refresh the browser after code changes are made and saved.The code will be presented in purple for you to copy paste into the editor or your own web pages.  Anything in green will be an assignment.  I am furnishing my email address for you to mail in all completed assignments which I will critique and email them back to you  --  george1936@charter.net.


How the Browser works with your code.
 There are many different browsers available for the user.  I use Chrome but Firefox, Safari and Internet Explorer are also very good.  The overwhelming majority of users prefer one of these four.  There are many more out there but not widely used.  The Tor browser is a highly secure browser that allows the user to surf the dark web but it's security features come at a high price.  It's very slow.

The main function of a browser is to interpret the web code you present it with, by requesting it from the server and displaying the results in the browser window. The code is usually an HTML, CSS, and/or Javascript document, but may also be a PDF, image, or some other type of content. You enter the code, the browser interprets it and displays it on your browser screen.
The way the browser interprets and displays HTML files is specified in the HTML and CSS specifications. These specifications are maintained by the W3C (World Wide Web Consortium) organization, which is the standards organization for the web.

The structure of html.  The below code shows the main elements of a html page.  The code will usually work without a head or body element but as a rule they should not be left out. There are many more elements and their tags available but these are the most common.  We will be getting into many of the others as you continue thru the tutorials.

<!DOCTYPE html>

 <html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Examine the above code to see the different elements and their placing in the structure of the html document. .

HTML Elements:
An HTML element usually consists of a start tag and end tag, with the content inserted in between. Each HTML element is everything from the start tag to the end tag:
<p>My first paragraph.</p>                  <h>My first header.</h>
 Do your typing   <p>here </p>  and  <h>here</h> to have it appear on the screen.

The "!Doctype html" beginning lets the browser know I am using html code. Notice that the main elements I use are ; head, html, body and they are enclosed in "more than" or "less than" brackets. Each time you open an element you need to close it by using the same element like '< p> or <h>' preceded by a forward slash and enclosed in brackets.

You can add comments to your code that will not affect the code use or be seen by your browser, but can guide the programmer in organizing the web pages they are working on;
<!-- Write your comments here -->   This will not work in javascript.
In Javascript, Two forward slashes // allows you to comment till the end of the line. /* lets you add comments  until */ is reached(this could include 4 or 5 five lines).

Comments will not appear on your web page. Again notice the --> which close your comments. They will be hidden from the viewer. 
Use <br> to produce a line break or space between the lines. It has No </br> closing tag which is an exception to the rule.


Header Attributes

The header element <h> can be used in both the head and body elements and can control the size of the font.They are just one of the many ways to control header font sizes. This will not work with the <p> or paragraph elements but we will show ways to change their font size also.

This is h1 text size

This is h2 text size

This is h3 text size

This is h4 text size

This is h5 text size
This is h6 text size
The paragraph element <p> allows you to write text on the screen.  The <h> or <p> will not show up on the screen but what's between them should. You can specify a particular paragraph by adding a number after p to get <p1> or <p22> etc. Make sure you also use the same number with the closing tag.   

<pre> Defines pre-formatted text where you can type in code using your own spacing and it will look the same in the browser. This does not include text size, style or color. Only line breaks This is not used a lot but can be when needed.  Don't forget to close it out with </pre>.

Styles : Things like color, text size, background color, text allignment, border color, font-family, and border-width etc.
study the below examples.
Inside the element's opening brackets insert a space and then style=.  You then, inside quotes, put the property (like color or background) you wish to define and then a colon. Next you place the value for that property (like red,green or font size). So <p> might become <p style = "color:red";> Anything between these brackets will have the styling you have coded. You end with a semicolon, quotes and then the bracket. Be careful to not leave in extra space and use the exact protocol that is in the examples. Whenever you use quotes you must close out something with quotes.     .

I am normal
<p>I am normal</p>

I am red
 <p style="color:red;">I am red</p>

I am blue
<p style="color:blue;">I am blue</p>

I am Big
<p style="font-size:36px;">I am big</p>

                                       I am center aligned
<p style="text-align:center">I am center aligned</p>

I am left aligned
<p1 style="text-align:left;">I am left aligned</p1>                                                                                                                  I am right aligned
<p> style="text-align:right;">I am right aligned</p>                                                                                                                                        

Another way to align text is to use the element center.  Almost all programmers today use the style text alignment shown above.

<!DOCTYPE html>
<html> <head>
<title>Centring Content Example</title>
</head>

<body>
<p>This text is not in the center.</p>
<center>
This text is in the center.
</center>
</body>

This text is not in the center.

This text is in the center.

The META element can be used to include name/value pairs describing properties of the HTML document, such as author, expiry date, a list of keywords, document author etc.

The <meta> tag is used to provide such additional information. This tag is an empty element and so does not have a closing tag but it carries information within its attributes.

You can include one or more meta tags in your document based on what information you want to keep in your document but in general, meta tags do not impact physical appearance of the document so from appearance point of view, it does not matter if you include them or not.  These tags cab be used to enclose cookies or most important to work with PHP files to gather and store info about the users habits.  More about this much later.
Copy paste the below in your editor to see how well hidden the meta data is.
</html>
<!DOCTYPE html>
<html><head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
<meta http-equiv = "cookie" content = "userid = xyz;
expires = Wednesday, 08-Aug-15 23:59:59 GMT;" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>

The above is for general knowledge but you will probably not useat this stage in your programming.

.Notice the syntax in the positioning of the ":" and ";" in the above style examples and the quotes around the style type and selection. Leave just one of these out and it won't work right. Notice also the horizontal lines

above.  They are the result of the <hr> code.  These, like the line break code <br> do not require a closing companion with the forward slash.

Practice exercises

At this point we need to get some practice under our belts.

Exercise 1:   Try to complete the below list of web pages and E-mail them to me in .txt format as attachments.
My E-mail address = george1936@charter.net. I will critique and return them to you.
A good way to do these (to save a lot of time) is to open a text editor like "Word Pad" and resize it to half your screen and as you write code save it with the .html ending and while keeping the word pad open check your code on your browser. Make your code, save again and check your web page.
  1. Short letter to a friend
  2. A job resume
  3. A web page using examples of all the codes taught so for

Text Formatting

In the last session you learned about formatting in the entire heading or paragraph. If you wanted to format a part of the text of one of these you use the following protocol. You can format a single word or larger group of text. Open and close them around the text you wish to format. You can use more than one of these in the same paragraph or on a single word.
Try experimenting with these tags.
<b> - Bold text
<strong> - Important text
<em> - Emphasized text
<mark>- Marked text    The text inside the mark tags are high lighted yellow as if you were studing and wanted to majic marker some important stuff.
<small> - Small text
<del>- Deleted text
<ins> - Inserted text
<sub>- Subscript text
<sup> - Superscript text


this is bold text
<p1><b>This is bold text</b></p1>

Don't forget the end tags

Use the above protocol with the above tags and end tags to get the desired results. Strong and bold text are very similar.  You put the tags around a word, letter or the whole sentence to change smaller parts.

this is strong text
<p1><strong>This is strong text</strong></p1>

this is emphasized text
<p1><em>This is emphasized text</em></p1>

this is marked text
<p1><mark>This is marked text</mark></p1>

this is small text
<p1><small>This is small text</small></p1>

this is deleted text
<p1><del>This is deleted text</del></p1>

this is inserted text
<p1><ins>This is insertedtext</ins></p1>

this is subscript text
<p1>This is <sub>subscript text</sub></p1>

this is superscript text
<p1>This is <sup>superscript text</sup></p1>

You may think you will never need some of the above but when you do, and you will, they can make your web pages shine.

Ordered List with with numbers.

A good tool when organizing your web page is html's listing ability. These provide a way of organizing your web pages  in a pleasing and understandable way.  Lists provide a wide variety of list choices and you should practice with most of them. The list examples I have used are only 3 parts each but they can be any number in length.  

The line breaks are automatically input between the items;
Below is an ordered list

  1. Coffee
  2. Tea
  3. Milk

The code and protocol for an ordered list is;

<ol>
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ol>

  Unordered List with Disc Bullets, Roman Numerals, Lower Case

An unordered list

  • Coffee
  • Tea
  • Milk

If you replace the ol tag with ul this gives you a unordered list and since there are many types of unordered list use the keyword list-style-type:
<ul style="list-style-type:disc">
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ul>

You can also make a list within a list or a 'nested list' .

A Nested List

  • Coffee
  • Tea
    • Black tea
    • Green tea
  • Milk

<!DOCTYPE html>
<html>
<body>

<h2>A Nested List</h2>
<ul>
   <li>Coffee</li>
   <li>Tea
      <ul>
      <li>Black tea</li>
      <li>Green tea</li>
      </ul>
   </li>
   <li>Milk</li>
</ul>

</body>
</html>

You can us any of the below tags to customize your lists Notice the difference in the code
<ul style="list-style-type: disc ">               If you replace disk with 'square' or 'a' this will provided the stated styling in your list.

disc Sets the list item marker to a bullet (default)
circle Sets the list item marker to a circle   <ul style="list-style-type: circle">
square Sets the list item marker to a square   <ul style="list-style-type: square ">
 none The list items will not be marked        <ul style="list-style-type: none">

<ol type="a">               If you replace disk with 'square' or 'a' this will provided the stated styling in your list.

The type Attribute
You can use type attribute for <ol> tag to specify the type of numbering you like. By default, it is a number. Following are the possible options -

<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.

<ol type = "a" >
   <li>Coffee</li>
   <li>Tea</li>
   <li>Milk</li>
</ol>

  1. Coffee
  2. Tea
  3. Milk

Exercise 2; Make a grocery list with produce , meat and other misc. items.
Include at least one nested loop. Code a make believe story using all the items taught so far.

E-mail your exercise to me for evaluation and critique.

The details tag

The <details> tag specifies additional details that the user can view or hide on demand. The <details> tag can be used to create an interactive widget that the user can open and close. Any sort of content can be put inside the <details> tag. The content of a <details> element should not be visible unless the open attribute is set. When you click the arrow it points down and displays your message. When you click the arrow again it returns to it's original condition and the message disappears.
Html is Great

- George Owings. All Rights Reserved.

The standards of the html, css and javascript codes are strickly maintained by the world wide consortum so that anyone can write to most any browser and have their data displayed pretty much the same.

Note: The details tag is not supported in Internet Explorer.

<!DOCTYPE html>
<html>
<body>
<details>
<summary>Html is Great</summary>
<p> - George Owings. All Rights Reserved.</p>
<p>The standards of the html, css and javascript codes are strickly maintained by the world wide consortum so that anyone can write to most any browser and have their data displayed pretty much the same.</p>
</details><p><b>Note:</b> The details tag is not supported in Internet Explorer.</p>
</body>
</html>

   'blockquote' tags:

 The blockquote element is used to indicate the quotation of a large section of text from another source. Using the default HTML styling of most web browsers, it will indent the right and left margins both on the display and in printed form, but this may be overridden by Cascading Style Sheets (CSS). Copy paste the code below into an editor and check out the results.

<!DOCTYPE html>
<html>
<body><p>Here is an example of a blockquote:</p>
<blockquote cite=>
There may be slight difference in the indentation when viewed on different browsers. The blockquote tags protect the information from styling changes unless they are style in the blockquote tag itself.
</blockquote>
</body>
</html>


More styles:

The html style tags for background color let's you spice up presentations.
This is a small sample of html abilities with color.   We will go into this area in more detail soon.

Blue background

Tomato Color This color is cyan Pretty in Pink This is a nice color too

Place the below code between the body element brackets to get the above results. If I had put a <br> or line break  after each paragraph they would be in a column instead of a left to right row. This is different than the attributes.  They could affect a part of something inside the paragraph. This type of styling affects the entire paragraph you have styled.

<body>
   <p1 style="background-color:Tomato">Tomato Color</p1>
   <p1 style="background-color:cyan">This color is cyan</p1>
   <p1 style="background-color:pink">Pretty in Pink</p1>
   <p1 style="background-color:Lime">This is a nice color too </p1>
 </body>

The protocol for html background color is;

<p1 style="background-color:Tomato;">Tomato Color </p1>
Try this with different colors in the above examples.

Tables

Tables can be a real plus for your web pages........and they are so easy to work with. Their basic structure is shown below.

 

Name
Language
Ability
George html Average
Steve CCS Expert
JElvis Javascript Pro

The code for a table goes in the body element.  We will learn how to make borders like the one shown later on. The entire table is in the <body> and is enclosed inside opening <table> and closing </table> tags. Each horizontal row is enclosed inside opening and closing <tr> brackets. All cells of   <th> or <td> are inclosed inside the sets of  the <tr> brackets .

The first horizontal row, containing the <th> code are always bold and larger than the <tr> code. The <tr> horizontal layers stack on top of each other. In this table there are 3 <th> or 3 <td> cells in each <tr> layer.  You can make as many layers as you wish. 
Make sure you have the same number of cells in each layer or your table will have empty cells showing. To add another another column of data add another <td> element to each of the sets of  elements. To add another layer simple enclose the proper number of <td> codes between a pair <tr> codes.

Check out the below code and make a table yourself.  Change the color of specific text using different styles with <th> and <tr>.  Use the same format you used with <p> and <h>.   Anything you style in the table element changes the entire table. Anything you style in <th> window affects that row.  anything you style in a <th> or <tr>affects just that cell of the table.  Try different styles and note the results.

<table style="width:50%">
<tr>
   <th>Name</th>
   <th>Languages </th>
   <th>Ability</th>
</tr>
<tr>
   <td>George</td>
   <td>Html</td>
   <td>Good</td>
</tr>
<tr>
   <td>Sreve</td>
   <td>CCS</td>
   <td> Expert</td>
</tr>
<tr>
   <td>Elvis</td>
   <td>Javascript</td>
   <td>Pro</td>
</tr>
</table>

Alter the opening bracket of the table element adding a border style to it as shown below.  Width can be expressed in px or %. If neither is present it will default to pixels or px.In the below table

Notice how the styling keywords rowspan and colspan can be used to configure the structure of the table.
Column 1 Column 2 Column 3
Row 1 Cell 1 Row 1 Cell 2 Row 1 Cell 3
Row 2 Cell 2 Row 2 Cell 3
Row 3 Cell 1

<!DOCTYPE html>
<html>

<head>
<title>HTML Table Background</title>
</head>

<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>

</html>

<table width="527" border="5" align="center" style="width:80%">
I included two different ways to express width above.

Exercise 3:  Discuss your interest in sports using multicolored fonts, different colored backgrounds and make a sports minded table.   Start with 2 horizontal and two vertical windows.  After you check it out increase  to 4 Horz and 4 vert. Try changing the border size alignment and width. Use colspan and rowspan in a seperate table. E-mail all to me and I will critique it and return it to you.


The caption element can be used to name a table.  Notice that it is centered above the table. Check out the syntax of the caption element.

This is the caption
row 1, column 1row 1, columnn 2
row 2, column 1row 2, columnn 2

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>

<body>
<table border = "1" width = "100%">
<caption>This is the caption</caption>

<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>

<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>
</html>

Hyperlinks:
The <a> tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the <a> element is the href attribute, which indicates the link's destination. By default, links will appear as follows in all browsers: An unvisited link is underlined and blue.
<a href="http://home.earthlink.net/~gowings130/newgeorgewebsite/Nerd%20Central/Tutorials.html">Hello</a>

 <a href="The web site you wish to visit">The text or image you click on to go to that site</a>

Make a list of three different hyperlinks. This is like a miniture bookmarks list.  Try out your links to make sure they work.

You can also link to the beginning of the active page using the following syntax; This is useful when you have a very long web page.  Some use it at the beginning of the web page to direct the user to different parts of their document.                             

<a href="name of active web page ">text to click on </a>

The title attribute:
 Here, a title attribute is added to the <p> element. The value of the title attribute will be displayed as a tooltip when you mouse over the paragraph:

<!DOCTYPE html>
<html>
<body>
   <h2 title="I'm a header">The title attribute</h2>
   <p title="I'm a tooltip">
   <!--Mouse over this paragraph, to display the title attribute as a tooltip.-->
   </p>
</body>
</html>

 

Move the mouse over the below text to see the message.

it will show the message embedded in the code. Now you see me, now you don't.

iframes:
This allows you to open any website in a scroll whose sizes you specify.  Html and javascript work together to make many animated video games.  In CSS 102 we will be able to allow the user to choose a location and a map of that location will appear. Put the code in the body and try several diff websites to get the feel of the code. Change the width and height for different affects.

<iframe src="http://home.earthlink.net/~gowings130/newgeorgewebsite/Nerd%20Central/T-2.html" height="400" width="600"></iframe>
The web site  http://home.earthlink.net/~gowings130/newgeorgewebsite/Nerd%20Central/T-2.html" height="400" width="600  is displayed.

 

In HTML 202 we will have a table with a different website in each cell.

Videos
It is simple to embed videos in your html. If you don't have one download it from facebook or some other web site.  Make it a short one because they take up a LOT of space.  Keep it in the same folder as your code.

 <!DOCTYPE html>
<html>
<body>
<p style="text-align:center" > The web browser is given the info in the below code to display the vidio with sound and full screen selections.
<video width="320" height="240" controls><source src="bear movie.mp4" type="video/mp4"></video> 

<p>Very quick and easy code</p>
</body>
</html>


The web browser is given the info in the above code to display the vidio with sound and full screen selections. Very short and very easy code.  It is possible to make a table with each cell showing a different video at the same time.   Try resizing YOUR browser window and notice what happens to the alignment and size of the video. Also try changing the video width and height in the code.

HTML File Paths

File paths gives you the location of a file in a web site's folder structure.  We will be referring to this section in HTML 102
File paths are used when linking to external files like:

  • Web pages
  • Images
  • Style sheets
  • JavaScripts

<img src="picture.jpg">                    picture.jpg is located in the same folder as the current page
<img src="/images/picture.jpg">        picture.jpg is located in the images folder in the current folder
<img src="../picture.jpg">                 picture.jpg is located in the folder one level up from the current folder

It is admazing easy to insert a video into your script

On to HTML 102
Go to Beginning of this web page