HTML stands for HyperText Markup Language. HTML is not a programming language, but rather a markup language. HTML documents are plain text files that are not case sensitive. Creating an HTML document is easy.
Structure of HTML
1. Element - Primary components of an HTML file. These includes the table, paragraph, list, headings, fonts, etc.
2. Tag - Used to specify ("mark-up") regions of HTML documents for the web browser to interpret. It consists an element name or letter symbol enclosed in left and right angle brackets. Tags look like this: <tag>
3. Attribute - Used to modify the value of the HTML element. Elements will often have multiple attributes.
HTML TAGS
Kinds of Tags
1. Paired Tags – It consists of start tag and an end tag.
Start Tag <html>
End Tag </html>
2. Empty Tags – Tags that do not require an end tag.
<br>, <hr>
HTML Elements
An element consists of three basic parts: an opening tag, the content, and finally, a closing tag.
<p> Welcome to Web Development!</p>
Every (web) page requires four critical elements: the html, head, title, and body elements
HTML Attributes
Attributes are used to amplify tags. Attributes are placed within the opening tag and the value assigned to an attribute may be enclosed in single quotes or double quotes. Several values separated by comma can be assigned to a specific attribute.
Structure of html document
<html>
<head> Title Here </head>
<body>
Body Here
</body>
</html>
• <HTML> </HTML>
The main container of HTML pages.
• <HEAD> </HEAD>
Contains information about the page such as the TITLE, META tags for proper Search Engine indexing, STYLE tags, which determine the page layout, and JavaScript coding for special effects.
• <TITLE> </TITLE>
The TITLE of your page. This will be visible in the title bar of the viewers’ browser.
• <BODY> </BODY>
The main body of the page.
The HTML paragraph element should not contain tables and other block elements.
• Attributes of <p> tag:
ALIGN = “justify”, “center”, “left”, “right”
WIDTH – horizontal measurement of the paragraph
Headings
<body>
<H1 align = “ center” >The Solar System</H1>
<H2 align = “ left” >The Solar System</H2>
<H3 align = “ right” >The Solar System</H3>
<H4 align = “ center” >The Solar System</H4>
<H5 align = “ center” >The Solar System</H5>
<H6 align = “ center” >The Solar System</H6>
</body>
Line Breaks
<p> Sincerely, <br />
<br />
<br />
Juan Dela Cruz <br />
CICT Instructor
</p>
Horizontal Rule
<hr />
Use
<hr /> <hr />
• Attributes of the <hr> tag:
SIZE – thickness
WIDTH
COLOR
ALIGN
Listing Tags
<ul> - unordered list; bullets
<ol> - ordered list tags; numbers
<li> - It places items into the list.
<h4 align =“center”> MY GOAL </h4>
<ol>
<li> Find a job </li>
<li> Get Money </li>
<li> Move Out</li>
</ol>
<OL> </OL>
Used to create numbered lists or lists that are ordered numerically in some way.
• Attributes of <OL> tag:
TYPE (“I” , “I” , “A”, “a” , “1”)
START
Specifies the value at which the listing should start.
<UL> </UL>
Used to create bulleted list.
• Attributes of <OL> tag:
TYPE (“circle” , “square” “disc”)
Formatting
<I> italic text </I>
<U> Underline text </U>
<B> Bold text </B>
<EM> Emphasized Text </EM>
<SUB> subscripted text </SUB>
<SUP> superscripted text </SUP>
<STRONG> Strong Text </STRONG>
<SMALL> small text </SMALL>
<STRIKE> strike text </STRIKE>
<CODE> Computer code text </CODE>
<DEL> STRUCKTHROUGH TEXT </DEL>
Font
<p>
<font size=“7” face=“Georgia, Arial” color=“maroon”> FONT </font>
</p>
Colors: BLACK, YELLOW, RED, MAROON, GRAY, LIME, GREEN, OLIVE, SILVER, AQUA, BLUE, NAVY, WHITE, FUCHSIA, PURPLE, TEAL
Or color codes: Bgcolor=“rgb(0,255,0)” – green
Body Tag
• BACKGROUND
• BGCOLOR
• BGPROPERTIES
• ALINK
• LINK
• VLINK
• TEXT
IMG tag
• Attributes of the <img> tag:
SRC
ALT
ALIGN
HEIGHT
WIDTH
BORDER
HSPACE
VSPACE
Anchor Tag
The anchor tag is used to mark a piece of text or inline image in order to create a link either within the same document or to another web page.
• Attributes of the <a> tag:
• HREF
• NAME
• TITLE
• TARGET
• ACCESSKEY
<a href = “#link1” target = “_blank” > Click Link 1</a>
Table Tags
<TABLE> </TABLE>
ALIGN
BORDER
BORDERCOLOR
BORDERCOLORDARK
BORDERCOLORLIGHT
BACKGROUND
BGCOLOR
CELLPADDING
CELLSPACING
FRAME
WIDTH
HEIGHT
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Marquee
• Attributes of the <marquee> tag:
• BEHAVIOR
• DIRECTION
• ALIGN
• BGCOLOR
• HEIGHT
• WIDTH
• SCROLLAMOUNT
• SCROLLDELAY
Video and Music Codes
The attributes controls sets which controls for the media player will be displayed.
Autostart – choose if the media file will start automatically.
Loop – sets the media file too repeat or not.
Volume – set the volume of the media file. The range is from 0 to 100.
<embed src="she will be loved.mp3" autostart="false" loop="false" volume="100"/>
<embed src="Wildlife.wmv" autostart="false" volume="100" width="500"/>
Form Tags
<form> </form>
Creates a form that allows user input.
<input>
Defines the controls used in the form, using a variety of type attributes values.
<button> </button>
Improves the “submit” button, which can only contain one line of text.
<select> </select>
Creates a menu of choices from which a visitors select.
<option> </option>
Specifies a choice in a <select> tag
<textarea> </textarea>
Creates a multiple-line text input area.
Input Tag Attributes
TYPE - Type of input control. (text, password, checkbox, radio, submit, reset, file, hidden image, button)
NAME - Name of the control.
VALUE - Value submitted if a control is selected. (Required for radio and checkbox controls)
CHECKED - Set a radio button and checkbox to a checked state.
DISABLED - Disables controls.
READONLY - Used for text password.
SIZE - Number of characters to be displayed on the form.
MAXLENGTH - Maximum characters that can be entered.
SRC - URL of the location of an image.
ALT - Alternate text for an image control.
TABINDEX - Sets tabbing control among the control elements.
Attributes of <select> tag:
SIZE - Number of options
MULTIPLE - Multiple selections (“MULTIPLE”)
DISABLED - Disable controls.
TABINDEX - Sets tabbing control among the control elements.
Attributes of <option> tag:
SELECTED - Specifies whether the option is selected
VALUE - Value submitted if the option is selected
<html>
<head>
<title>Why I like to go swimming</title>
</head>
<body>
<h1> Why I like to go swimming in the summer. </h1>
<p> Swimming is my most favorite activity in the summer. When the sun is shining and the air is warm, you will find me dipping into my backyard pool. It’s not an impressive pool, only three feet deep, but it’s mine.</p>
<p>There are three reasons I like to swim:</p>
<ul>
<li>I get lots of exercise</li>
<li>I enjoy the freedom</li>
<li>I have an opportunity to be in the sun.</li>
</ul>
</body>
</html>
XHTML
XHTML stands for Extensible Hypertext Markup Language
XHTML is almost identical to HTML 4.01
XHTML is a stricter and cleaner version of HTML 4.01
XHTML is HTML defined as an XML application
XHTML is supported by all major browsers.
XHTML DOCTYPE is mandatory
The XML namespace attribute in <html> is mandatory
<html>, <head>, <title>, and <body> is mandatory
1. DOCUMENT STRUCTURE
A. DOCTYPE
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
B. Namespace
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
C. META Tag
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
XHTML elements must be properly nested
XHTML elements must always be closed
XHTML elements must be in lowercase
XHTML documents must have one root element
Attribute names must be in lower case
Attribute values must be quoted
Attribute minimization is forbidden
W3C Validation
http://validator.w3.org/
No comments:
Post a Comment