Basic HTML is easy That is the scripting language used to create a web page. It works fine but works more efficiently as XHTML or XML using style settings or sheets also known as CSS.

aaa This text is green with span style hhh

This is h4 should show blue

this is h5 should show red
Web pages are just text pages with mark up code using < and > All pages start with a special codes

The first is the Doctype. You can look at the code for this page to see a typical one. See Internet tutor for details on Doctypes

This is followed by <html>

This is followed by <head>

The Head is a special place at the top of your document to place instructions and information about the document.

<title> Then the Web page title such as The Easiest Language </title>

There are other things that you can put in the head but are not necessary to be taught at this time. so we close the head section with </head>

If you forget to close the head your page will be blank except for the title.

That is followed by <body>
Inside this body tag you put all of your web page that you want the viewer to see.

It is followed by a close body tag using the / symbol and that is followed by a close html tag
</body> </html> This ends the document.


----------- ----------- -------------- ----------- ---------- --------------- ------

Everything typed in text form is viewable unless it is enclosed in < > called widgets.

If you forget one it will show your code.
If you do not tell it what size of type to use it will use the default size of the browser.

If you wish to make type bold the old easy way was to put it between <b> this type is bolded </b> bold codes. The new way is tu use the fone-weight property to change the weight-thickness of the letters. Will Explain this later.

Type size is determed by the style code in the head (or in a separate external style sheet.

<p> This is size p

We must close out the p h and other directions otherwise all of the following text the same size as last used.

If you Just type in text without any codes and the text will show on the web page in the normal size font unless you change it.

The tags we will use to layout the content:

<h> The Heading tags which range from ‘<h1></h1>’ to ‘<h6></h6>’, are going to be used to mark/tag headings in our pages. So the most important heading will be wrapped in a <h1> tag and the least important in a <h6> tag.

An example of a heading:
<h1><strong>CSS Template Layout</strong></h1>
This tells the browsers and the search engines too, that this page is primarily about: ‘CSS Template Layout’

All browsers have a default size (for each<h> tag) as to how it renders text when placed between these tags. Many of these defaults can be unusable (especially<h1>) because they come out too big. But never fear, CSS is here. We will use CSS to make the text sizes more to our liking.

<p> The Paragraph tag is used to mark parts of the pages as being ‘paragraphs’, simple enough. Paragraph tags are what they call a ‘block element’; that means that it acts like a block where a space is automatically inserted before and after each <p> tag pair. You see it work in the examples coming up.

<ul> and <ol> List tags will be used to create our menus. The tag <ul> is the ‘un-ordered list tag’ that creates a list with bullets or other images/icons that do not specify or denote an order; hence the term ‘un-ordered’. The other list tag mentioned (<ol>) is the ‘ordered list tag’ and it creates a list that, instead of bullets, the list elements are marked with numbers or letters. Code examples to follow.
<div> Example of code for a un-ordered list (no numbers) navbar is just a name for navigation bar but you could name it anything you want. The other items like home page, Musings etc. are just examples.
We will use div’s to create containers for parts of our page. One div will be used to ‘hold’ our navigational menu and another div to ‘hold’ the main page.
<a href> The most important tag in HTML: the ‘link tag’ or the ‘hyperlink tag’. This makes text ‘hyper’ so that when we click on it we can load another page or activate/call some JavaScript (otherwise known as ECMA script).
<img> This is the ‘image tag’, allows you to link to images so that they show up in our pages. In HTML images are not embedded into the actual page, instead the image tag (<img>) only points to where the image is and the browser will attempt to load that image when a surfer loads your HTML page.
- See more at: http://www.csstutorial.net/part-1/basic-css-concepts-part1.php#sthash.sv9Pqnhf.dpuf


Here is the code to add any picture
<IMG SRC="file name with extension like bell.gif" align="center" WIDTH=80 HEIGHT=80 BORDER=0 >

Here is the coding to add a link to another web page, or PDF file.


<a href="put file name here with extension such as directions.html"> put the words you want the viewer to sea about it such as Here are the directions </a>
My Web Page
Be sure to put one or more <br>codes after them to move down a line

Some of the more common HTML codes Always enclosed in < > are: <br> tells the browser to start a new line Each time it is added it makes a line space like hitting Enter on a keyboard. The paragragh code is used for most of the text and is defined in the style section as p {font-size:1.26em;}
Here is the result:

This is the p text.

Header 6 is defined in the style section as h6 {font-size:1.32em;}
This is h6 type size ABCDEFGHIJKLMNOPQRSTUVWXYZ


Header 5 is defined as h5 {font-size:1.4em;} This is h5 type size ABCDEFGHIJKLMNOPQRSTUVWXYZ


Header 4 is defined as h4 {font-size:1.6em;} Here is h4 type size ABCDEFGHIJKLMNOPQRSTUVWXYZ



Header 3 is defined as h3 {font-size:1.8em;} Here is h3 type size ABCDEFGHIJKLMNOPQRSTUVWXYZ



Header 2 is defined as h2 {font-size:2em;} Here is h2 type size ABCDEFGHIJKLMNOPQRSTUVWXYZ



Header 1 is defined as h1 {font-size:2.5em;} Here is h1 type size ABCDEFGHIJKLMNOPQRSTUVWXYZ



<b> bold can be done by surrounding with the bold b code </b>

More common now is to use
font-weight: bold

font-weight: normal


also font-weight bolder than with a number from 100-900 900 being boldest
also font-weight lighter than with a number from 100-900 100 being lightest

font-italic yields italic



font normal turns off other attributes

<u> underlines your text </u>

More commonly now
text-decoration states whether the text has got a line running under, over, or through it.

text-decoration: underline, does what you would expect.
text-decoration: overline places a line above the text.
text-decoration: line-through puts a line through the text (“strike-through”).

puts a line through the text



This property is usually used to decorate links and you can specify no underline with text-decoration: none.


The text-align property will align the text inside an element to left, right, center, or justify.

This is usually done within the paragraph element in the style section p { text-align: center; } or left or right
But can be done in line using inside h tag style="text-align: center;"

This is centered.

This is aligned to left

This is aligned to right


The above can anso be defined in style section perhaps by defining h2 ra ( meaning right aligned) and then placing a h2 ra tag at point wanted which is less work.

list-style-type in style section creates a bulleted list position of bullet defaults to outside
bullet is url("bullet.png")
value for bullet disc (a solid circle, circle (a hollow circle) square a (solid squaare), decimal, upper-roman (I II IV), lower-latin (abcd), upper latin (ABCD ) and none

Body color can be set by <body bgcolor="#ffffff">

Text size and other text attributes and are defined in the style section at the top or in an external separate style sheet. This is better as it can be used for multiple pages.

At the top of a document it is simply a matter of typing your CSS Code between <style> and </style>

If you want to make a separate sheet simply refer to it at the top of your web page in your head section as <link rel="stylesheet" type="text/css" href="myst.css"/>

In style sheets (also known as CSS) you define the tags individually and only once. In the older HTML and documents saved in HTML by word processors this defining of the font size for example may be on on nearly every line. This makes the document much larger. So CSS makes a much smaller document/ HTML is forgiving of mistakes but CSS is precise and unforgiving. Code should be in lower case and don't forget a < or > or you will see the code. Or if you forget to type the </style> in the head section you get a blank page.




p is the standard body font being set for 1.26em in size the other h font sizes are set in ems An em is the standard font size of the browser. Other units of measurement can also be used such as pixels, printer points, picas, centimeters, millimeters, inches or percentages.
You can also insert color into a line directly into the text with <p>
We now use a special code for changes. We call this a class.
The following is put in the style section. Using the p code gives the color to the whole paragraph. Of course you can make the paragraph as long or short as you want by closing it with a </p>

color Declares the color of the text. Valid color names, RGB values, hexidecimal notation. The predefined color names are:

aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white yellow transparent other examples that can go in the style section
Color red can also be defined as rgb { color:rgb(0,255,0);} or rgb(100%,0%,0%) or #ff0000 or #f00



<p style="color: red" >text <p/>

text


The span is usually used to specify things in a smaller area of a line or a few lines.

Example lets make this text in the middle red. We used span to do this.

Blue Text

Green Text

Black Text

If you want to target particular sections, wrap the text with: <span class="redtext"> xxx </span> and add the following to your css: .redtext{ color: red;} Of course you will have to define each color you want in the style section.

<p> Background color can be set in text by style section h1 color: yellow; background-color: blue;

Background color can be applied to other HTML elements including body which will change the color or the background of the entire page.

Adding an Image to a background is done as follows: in the style section
body { background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right; }

Here are the associated properties for that
background-color, which we have come across before.
background-image, which is the location of the image itself.
background-repeat, which is how the image repeats itself. Its value can be:
repeat, the equivalent of a “tile” effect across the whole background,
repeat-y, repeating on the y-axis, above and below,
repeat-x (repeating on the x-axis, side-by-side), or
no-repeat (which shows just one instance of the image).
background-position, which can be top, center, bottom, left, right,
a length, or a percentage, or any sensible combination, such as top right.


float the default is none or no float

left Floats the box to the left with surrounding content flowing to the right.
right Floats the box to the right with surrounding content flowing to the left.
example #boondoggle { width: 20em; float: left; }


More about other elements. Again the p element is used to denoteparagraph of any length. You can force the p to be an in linestyle chnging a specific paragraph or line by surrounding the text you want to change as follows.

The span is usually used to specify things in a smaller area of a line or a few lines.

Example lets make this text in the middle red. We used span to do this.
The div is usually used to help specity attributes in a larger section often several paragraphs.


To put things in nice boxes use a table. Here is the code

<table>
<tr>
<th>Question</th>
<th>Answer</th>
<th>Correct?</th>
</tr>
<tr>
<td>What is the capital of Burundi?</td>
<td>Bujumburra</td>
<td>Yes</td>
</tr>
<tr>
<td>What is the capital of France?</td>
<td>F</td>
<td>Erm... sort of</td>
</tr>
</table>


To place a comment in the code that does not show or affect the document use /* This is a comment */

Well there are the most basic items but there is a lot more to be learned about web page coding just do a Google search on CSS coding and you will find dozens of sites that explain the coding with examples.