What is HTML
Html/Html5
HTML is the building block for web pages. By the end of this lecture, you will be able to:
- Be able to use basic tags to denote paragraphs, emphasis or special type.
- Create hyperlinks to other documents.
- Create an email link.
- Add images to your document.
- Use a table for layout.
- Apply colors to your HTML document.
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>
Save the file as mypage.html.
What are HTML tags?
HTML tags are used to mark-up HTML elements
- HTML tags are surrounded by the two characters < and >
- The surrounding characters are called angle brackets
- HTML tags normally come in pairs like <b> and </b>
- The first tag in a pair is the start tag, the second tag is the end tag
- The text between the start and end tags is the element content
- HTML tags are not case sensitive, <b> means the same as <B>
Logical vs. Physical Tags & Nested Tags
Logical tags are designed to describe (to the browser) the enclosed text’s meaning.An example of a logical tag is the <strong> </strong> tag. By placing text in between these tags you are telling the browser that the text has some greater importance.
Physical tags on the other hand provide specific instructions on how to display the text they enclose. Examples of physical tags include:
<b>: Makes the text bold.
<big>: Makes the text usually one size bigger than what’s around it.
<i>: Makes text italic.
<p><b><em>This is NOT the proper way to close nested tags.</p></em></b>
<p><b><em>This is the proper way to close nested tags. </em></b></p>
You may notice we’ve used lowercase tags even though I said that HTML tags are not case sensitive. <B> means the same as <b>.
The World Wide Web Consortium (W3C), the group responsible for developing web standards, recommends lowercase tags in their HTML 4 recommendation, and XHTML (the next generation HTML) requires lowercase tags.
Tag Attributes
Tags can have attributes. Attributes can provide additional information about the HTML elements on your page.
The <tag> tells the browser to do something, while the attribute tells the browser how to do it. For instance, if we add the bgcolor attribute, we can tell the browser that the background color of your page should be blue, like this: <body bgcolor=”blue”>.
This tag defines an HTML table: <table>. With an added border attribute, you can tell the browser that the table should have no borders: <table border=”0″>. Attributes always come in name/value pairs like this: name=”value”.
Attributes are always added to the start tag of an HTML element and the value is surrounded by quotes.
Basic HTML Tags
The most important tags in HTML are tags that define headings, paragraphs and line breaks.
Tag Description
<html> Defines an HTML document
<body> Defines the document’s body
<h1> to <h6> Defines header 1 to header 6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
<!–> Defines a comment
Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading while <h6> defines the smallest.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6> This is a heading</h6>
HTML automatically adds an extra blank line before and after a heading. A useful heading attribute is align.
<h5 align=”left”>I can align headings </h5>
<h5 align=”center”>This is a centered heading </h5>
<h5 align=”right”>This is a heading aligned to the right </h5>
Paragraphs
Paragraphs are defined with the <p> tag. Think of a paragraph as a block of text. You can use the align attribute with a paragraph tag as well.
<p align=”left”>This is a paragraph</p>
<p align=”center”>this is another paragraph</p>
Line Breaks
The <br> tag is used when you want to start a new line, but don’t want to start a new paragraph.
The <br> tag forces a line break wherever you place it. It is similar to single spacing in a document.
Horizontal Rule
The <hr> element is used for horizontal rules that act as dividers between sections, like this:
The horizontal rule does not have a closing tag. It takes attributes such as align and width. For instance:
Comments in HTML
The comment tag is used to insert a comment in the HTML source code.
A comment can be placed anywhere in the document and the browser will ignore everything inside the brackets.
You can use comments to write notes to yourself, or write a helpful message to someone looking at your source code.
Other HTML Tags
Logical Tags
Tag Description
<abbr> Defines an abbreviation
<acronym> Defines an acronym
<address> Defines an address element
<cite> Defines a citation
<code> Defines computer code text
<blockquote> Defines a long quotation
<del> Defines text
<dfn> Defines a definition term
<em> Defines emphasized text
<ins> Defines inserted text
<kbd> Defines keyboard text
<pre> Defines preformatted text
<q> Defines a short quotation
<samp> Defines sample computer code
<strong> Defines strong text
<var> Defines a variable
Physical Tags
Tag Description
<b> Defines bold text
<big> Defines big text
<i> Defines italic text
<small> Defines small text
<sup> Defines superscripted text
<sub> Defines subscripted text
<tt> Defines teletype text
<u> Deprecated. Use styles instead
Example
HTML Character Entities
Result Description Entity Name Entity Number
non-breaking space  
< less than < <
> greater than > >
& ampersand & &
” quotation mark " "
‘ apostrophe ' (does not work in IE) '
Non-breaking Space
HTML Backgrounds
The <body> tag has two attributes where you can specify backgrounds. The background can be a color or an image.
Bgcolor
The bgcolor attribute specifies a background-color for an HTML page. The value of this attribute can be a hexadecimal number, an RGB value, or a color name:
<body bgcolor=”#000000″> <body bgcolor=”rgb(0,0,0)”> <body bgcolor=”black”>
Background
The background attribute can also specify a background-image for an HTML page. The value of this attribute is the URL of the image you want to use. If the image is smaller than the browser window, the image will repeat itself until it fills the entire browser window.
<body background=”clouds.gif”> <body background=”http://profdevtrain.austincc.edu/html/graphics/clouds.gif”>
Try Demo 1
HTML Colors
Colors are defined using a hexadecimal notation for the combination of red, green, and blue color values (RGB). The lowest value that can be given to one light source is 0 (hex #00). The highest value is 255 (hex #FF). This table shows the result of combining red, green, and blue:
Color Color HEX Color RGB
#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
16 Million Different Colors
The combination of Red, Green and Blue values from 0 to 255 gives a total of more than 16 million different colors to play with (256 x 256 x 256). Most modern monitors are capable of displaying at least 16,384 different colors. To assist you in using color schemes.
HTML Lists
(bullet lists) or ordered lists (numbered lists).
An unordered list is a list of items marked with bullets (typically small black circles). An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
Definition Lists
Definition lists consist of two parts: a term and a description.
To mark up a definition list, you need three HTML elements; a container <dl>, a definition term <dt>, and a definition description <dd>.
The Anchor Tag and the Href Attribute
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 tell the address of the document or page we are linking to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.
The Target Attribute
With the target attribute, you can define where the linked document will be opened. By default, the link will open in the current window. The code below will open the document in a new browser window:
<a href=http://www.austincc.edu/ target=”_blank”>Visit ACC!</a>
Email Links
To create an email link, you will use mailto: plus your email address. Here is a link to ACC’s Help Desk:
<a href=”mailto:[email protected]”>Email Help Desk</a>
To add a subject for the email message, you would add ?subject= after the email address. For example:
<a href=”mailto:[email protected]?subject=Email Assistance”>Email Help Desk</a>
HTML Images
The <img> tag is empty, which means that it contains attributes only and it has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for “source”. The value of the src attribute is the URL of the image you want to display on your page. The syntax of defining an image:
The Alt Attribute
define an alternate text for an image. The value of the alt attribute is author-defined text:
<img src=”graphics/chef.gif” alt=”Smiling Happy Chef “>
It is a good practice to include the alt attribute for each image on a page, to improve the display and usefulness of your document for people.
Image Dimensions
<img src=”graphics/chef.gif” width=”130″ height=”101″ alt=”Smiling Happy Chef”>
Tables
Tables and the Border Attribute
To display a table with borders, you will use the border attribute
Cell Padding and Spacing
The <table> tag has two attributes known as cellspacing and cellpadding. Here is a table example without these properties. These properties may be used separately or together.
