Embed Size (px)
Citation preview
Getting Started with HTML
HTML – Hypertext Markup Language
HTML PRIMER Hypertext Markup Language
Standard format/official language of all web pages (the WWW)
Enhanced with JavaScript, Java, RealAudio, RealVideo, VRML, Flash and Shock animation, Fireworks, etc.
Can be created from scratch using Notepad, Word, any word processing software
HTML TAGS Instructions to a Web browser specifying how
a document is to be read HTML formatting commands are enclosed in
<angle brackets> or wickets Regular (non-code) text is not enclosed in wickets
NOT case sensitive, but must be spelled correctly <TABLE>, <table>, and <TaBLe> are all the same
<TABLE> Easier to see, use to emphasize tags <table> Use to emphasize text, not tags <TaBle> is not good practice – don’t do this!
Tag Components
Tag elements Opening and closing
tags Standalone tags Attributes and
attribute values Closing tag switches
Tagelement
<TITLE>
Left
Wicket
Right
Wicket
Basic anatomy of an HTML tag
Tag Elements
The first word within the tag determines the identity
Elements differentiate one tag from other tags
Typically an abbreviated or acronym-like form of the tag name <HR> = Horizontal rule tag element <BR> = Break tag element <A> = Anchor tag element
Opening/Closing Tags Most HTML tags
appear in a tag set Tag set begins with an
opening tag <tag element> and ends with a closing tag</tag element>.
Every thing between the opening/closing tags is affected
Closing tag Switch
<TITLE>My Web Page</TITLE>
Opening tag
Closing tag
Examples of opening/closing tags
Erich’s Porsche was the <B>fastest</B> in town.
Erich’s Porsche was the <I>fastest</I> in town.
Erich’s Porsche was the <U>fastest</U> in town.
Standalone Tags
Minority of tags in HTML Do not require a
corresponding closing tag
Common Break <BR> inserts a line
break Paragraph <P> inserts a
paragraph break Horizontal Rule <HR>
Tag
<HR WIDTH=“75%”>
Tag eleme
nt
Attribute
Value
Example of a standalone tag
Standalone Tag Examples
Erich’s Porsche is the coolest and fastest car in town.<BR>
Erich got a speeding ticket.<P>
Janet’s Toyota is the slowest and ugliest car in town.<BR>
Janet will never get a speeding ticket.<P>
Attributes and Attribute Values
Terms within a tag (within the wickets) specify characteristics of the tag element
Example: <HR WIDTH=“60%”> tells the browser to display a horizontal line as 60% of the width of the browser window HR is the ELEMENT WIDTH is the attribute 60% is the attribute value
Closing Tag Switches
Add the switch (forward slash /) to the closing tag <Title>My Web Page</Title>
Without the switch, it is like the tag never existed!
Characteristics of HTML Tag Attributes
A tag can have only one element All attributes are optional Not all tags have attributes Those tags that have multiple
attributes can feature all attributes simultaneously
Attributes only appear in opening tags; closing tags never include attributes
Example
<HR WIDTH=“50%” ALIGN=“LEFT” SIZE=“8”>
HR (horizontal rule/line) defaults Width=“100%” Alignment=“Center” Size =“2”
If no attributes are specified, browser will use these defaults
HTML DOCUMENT COMPONENTS Beginning and end of an HTML
document are marked with tags <HTML> </HTML>
HTML document normally has two sections HEAD BODY
HEAD Section This section contains
Document TITLE Author Date created Method of creation Keywords
Enclosed by <HEAD>…</HEAD> tags
Metadata
Metadata Information about the document, e.g., author,
date created, and keywords Used by search engines to index a Web page in a
database Not required, but helpful if you want users to be
able to locate your Web site using a search engine
Title of document will show in title bar in browser Rest of information in HEAD section will be
invisible to visitors to site
BODY Section
Enclosed by the <BODY>…</BODY> tags
Contains the actual content of the document
Everything you want visitors to see in their browser window when they access the page must be included in the BODY section
PROBLEMS WITH HTML Coding large documents in a complex
website can become Time-consuming Tedious Cumbersome Must remember to close tags you opened
ACTIVITY 1:VIEWING SOURCE CODE
Open your web browser and wait for the opening page
Click View, Source or Page Source Examine the tags – Can you guess
what some of them do? Great way to see how something is
coded so you can put on your web page!
FILE TYPES AND EXTENSIONS
Need to know this because you have to save code a certain way
Computers add file extension to file names to tell them apart .docx MS Word document .rtf MS Rich Text Format .txt Text files .html Files that can be viewed on the
Web
FILE TYPES AND EXTENSIONS
Name coded document _____.html
Save document as text type
.html extension is like putting up a sign that says, “Hey browser, read me. I’m an HTML document!”
USING HEADINGS Headings help readers find
important portions of text 6 standard headings give you an
easy way to control the size of text H1 through H6
Numbers indicate the level of importance H1 is the biggest <H1>VERY BIG</H1> H6 is the smallest <H6>VERY SMALL</H6>
NUMBERED/BULLETED LISTS
One of the most powerful ways to organize information on a web page Unordered (bulleted) list - <UL></UL>, gives bullets Ordered (numbered) list - <OL></OL> gives 1, 2, 3
or a, b, c or I, II, III…
Mark the beginning of the list with a tag <OL> or <UL>
Mark the items to be listed with the list tag <LI></LI>
<OL><LI>ORANGES</LI<LI>APPLES</LI><LI>PEARS</LI></OL>
Ordered Lists Example:
1. ORANGES2. APPLES3. PEARS
Type this in NOTEPAD
Get this in Browser
