HTML 01 Introduction to HTML 1 Objectives n
HTML 01: Introduction to HTML 1
Objectives n n n Browsing the World Wide Web Using Browser Software Understanding HTML Creating Web Pages with an Editor Creating Web Pages with HTML 2
Multimedia n n n Text Graphics Sound Animation Video 3
Browsing the World Wide Web n n The World Wide Web – the Web – WWW 1989, Tim Berners-Lee at CERN, the European Laboratory for Particle Physics in Geneva, Switzerland developed a new set of standards for exchanging information on the Internet. HTTP – Hyper. Text Transfer Protocol URL – Uniform Resource Locator or Web Address/Path 4
GLOBAL WWW SUFFIXES SUFFIX. com. org. net. biz. info. name. tv TYPE OF ORGANIZATION Commercial Nonprofit Networks Businesses Information organizations Individuals Television & Multimedia
SPONSORED WWW SUFFIXES SUFFIX. gov. mil. edu. int. aero. coop. museum TYPE OF ORGANIZATION Government (US only) Military (US only) Educational institution (US only) Organizations established by international treaties Aviation industry members Cooperatives Museums
Example of Address of HCCS Computer Science Dept. Computer Science Department or http: //csci. hccs. edu
Understanding HTML (Hyper. Text Markup Language) n n n Developed to allow sharing documents on different types of computers Not platform specific Simple markup language n n Places codes (called tags) in a Web document Provides information to browsers about document structure
HTML Source Code Use an editor to create n Use Microsoft accessory Notepad START: PROGRAMS > ACCESSORIES > NOTEPAD Key in HTML code then SAVE AS : filename. htm n
Understanding HTML Tags n Set of codes to create documents q q q n Format text Place pictures / graphics on the page Create links to other pages Follow a certain syntax Each tag begins with < tag > symbol q Most tags end with < / tag > symbol (some exceptions) Example: <HTML> … headings & body of web page … < /HTML > q
HTML Structure Tags n Two main sections: q q n Head section Body section HEAD SECTION q Must contain a title n q q Title will show up in Title Bar of web page May contain formatting styles May contain keywords for particular browsers
Structure of a Web Document <HTML> <HEAD> <TITLE> title text </TITLE> </HEAD> <BODY> … all the information you want displayed </BODY> </HTML>
Tips about Titles Only 1 title allowed n Should be brief, but descriptive n Will show up as Title bar of web page n Title cannot be formatted n Title cannot be a link to other pages n
Use of Headings n Use one large heading <H 1> that is similar to title q n n It will then appear as text in the web page There are six levels of headings <H 1> … </H 1> Largest font size <H 2> … </H 2> Next largest <H 6> … </H 6> Smallest font size Used to organize the body q Think “Newspaper Headlines”
Placing Text in a Document n PARAGRAPH BREAKS q q n Automatic paragraph break with Heading For other Paragraph breaks, use <P> tags LINE BREAKS q q Use <BR> line break but no double spacing <BR> does not have a closing tag (no </BR> )
Enhancing Text in a Document Physical Tags <B> … </B> <I> … </I> <CENTER> … </CENTER> <U> … </U> <STRIKE> … </STRIKE> <SUB … </SUB> <SUP> … </SUP> Bolds text Italicizes text Centers text Underlines text Strikes through text Text Subscript Text Superscript
Enhancing Text in a Document Logical Tags (Browser Dependent) <EM> … </EM> <STRONG> … </STRONG> Italicizes text Bolds text <DEL> … </DEL> Strikes through text <INS> … </INS> Underlined text NOTE: May be treated differently by Internet Explorer and Netscape
Nested Tags n n Creating multiple formatting tags Bold and Italicize <B> <I> Text to be formatted </I> </B> Results in: Text to be formatted Note the order of closing tags – last tag opened is first tag closed. (LIFO)
Using Attributes with Tags n n Attributes define the tag Attribute followed by = sign, then value Value is always enclosed in quotation marks Entered after the tag and before closing > EXAMPLE: <H 1 ALIGN=“Center” > Heading Message </H 1> Results: Heading Message
Creating Lists n Bulleted list (unordered list) Numbered list (ordered) n Unordered list n q q q Begins with <UL> tag and ends with </UL> Each line in list begins with <LI> (no closing tag) Each line will appear on web page as: n n Indented Preceded by a bullet
Unordered / Bulleted List EXAMPLE: <H 3> Your Shopping List </H 3> <UL> <LI> 1 Gallon Milk <LI> 1 Box Cereal <LI> 1 Pt. Strawberries </UL> RESULT: Your Shopping List § 1 Gallon Milk § 1 Box Cereal § 1 Pt. Strawberries n
Creating Lists n Numbered list (ordered) n Ordered list q q q Begins with <OL> tag and ends with </OL> Each line in list begins with <LI> (no closing tag) Each line will appear on web page as: n n Indented Preceded by a number
Unordered / Bulleted List EXAMPLE: <H 3> Your Shopping List </H 3> <OL> <LI> 1 Gallon Milk <LI> 1 Box Cereal <LI> 1 Pt. Strawberries </OL> RESULT: Your Shopping List 1. 1 Gallon Milk 2. 1 Box Cereal 3. 1 Pt. Strawberries n
Formatting with Cascading Style Sheets n n n Styles pre-define formats Allows changes to be made quickly All styles are defined in one place Makes for Global Formatting q Changes made in one place affects all Best to put Style tag in HEAD section
Cascading Styles n Example: All Body text to be centered <HEAD> <STYLE type = “text/css”> Body {text-align: center} </STYLE> </HEAD> <BODY> etc … q
Use STYLE tag to change Heading Fonts / Alignment Goes in the HEAD portion of code Example: <HEAD> <TITLE> My First Web Page </TITLE> <STYLE type = “text/css”> H 1 {font-size: 36 pt; color: red} H 2 {font-size: 20 pt; text-aligned: center} </STYLE> </HEAD> <BODY> <H 1> MY FIRST WEB PAGE </H 1> <! Heading font has been redefined > n <! …etc … example of a comment … > (Will not show on page) </BODY>
Syntax of STYLE tag <STYLE TYPE = “text/css”> H 1 {font-size: 36 pt; color: red} H 2 {font-size: 20 pt; text-aligned: center} </STYLE> n Always use the attribute TYPE=“text/css” q n n css is abbrev. For Cascading Style Sheets Tag(s) to be redefined follows <STYLE … > Do NOT place brackets around redefined tag Use curly brackets around new style declarations Inside {property, colon, value…} (use semi-colon to separate)
Defining a CLASS for Style n Class used in two places q q In HEAD Style definition In Body text HEAD EXAMPLE: <STYLE type =“text/css”> P {font-style: normal} P. it {font-style: italics} P. color {color: red} </STYLE>
Defining a CLASS for Style (Continued) n Class used in two places q q In HEAD Style definition In Body text BODY Text EXAMPLE: <P class = “it”> This text will be in italics </P> <P> This text is not affected <P> <P class = “color”> This text is red <P> <P> This text is not affected <P>
HTML to Show Use of Classes
RESULTING WEB PAGE
Mixing Classes with Other Tags Adding a Bold Tag
Mixing Classes with Other Tags BOLD HAS BEEN ADDED
Adding a Horizontal Line n Placing a line or ruler across the page n Use the <HR> tag q q q No closing tag Can change width and length of the line Used to divide a page
Adding a Horizontal Line Example: <STYLE type = “text/css”> HR {height: 10; color: blue} </STYLE> <BODY> <BR> <HR> </BODY>
Result of Adding a Horizontal Line 10 Point Blue Line inserted
Inserting Pictures / Graphics n Can include universal formats q q n . JPG. GIF (best for photographs) (most browsers accept this format) Use <IMG> q q q Must use SRC=“filename” attribute for source EXAMPLE: <IMG SRC=“A: picturename. jpg”> No closing tag
Inserting Pictures / Graphics n n Can use ALT= alternate attribute to display EXAMPLE: <IMG SRC=“A: picturename. jpg” ALT=“Company CEO”> n n This will display “Company CEO” rather than the file name (“A: picturename. jpg”) Other attributes available are HEIGHT, WIDTH, FLOAT (causes browser to load quicker) q q Height & Width are measured in pixels Float defines position (Left, Right, Center)
Inserting Pictures / Graphics n EXAMPLE using Height, Width, Float <IMG SRC=“A: picturename. jpg” ALT=“Company CEO” HEIGHT= “ 200” Width = “ 40”> n Better to use Classes for each image size <STYLE type=“text/css”> IMG. ceo. Pic 1 {width: 40; height: 200; float: center} </STYLE> … body text … <IMG SRC=“A: picturename. jpg” class=“ceo. Pic 1” ALT=“Company CEO”>
References n http: //www. w 3 schools. com/html/default. asp
- Slides: 41