Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
HTML 01: Introduction to HTML 1 Objectives Browsing the World Wide Web Using Browser Software Understanding HTML Creating Web Pages with an Editor Creating Web Pages with HTML 2 Multimedia Text Graphics Sound Animation Video 3 Browsing the World Wide Web 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 – HyperText 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 TYPE OF ORGANIZATION .gov Government (US only) Military (US only) Educational institution (US only) Organizations established by international treaties Aviation industry members Cooperatives Museums .mil .edu .int .aero .coop .museum Example of Address of HCCS Computer Science Dept. Computer Science Department or http://csci.hccs.edu Understanding HTML (HyperText Markup Language) Developed to allow sharing documents on different types of computers Not platform specific Simple markup language Places codes (called tags) in a Web document Provides information to browsers about document structure HTML Source Code Use an editor to create Use Microsoft accessory Notepad START: PROGRAMS > ACCESSORIES > NOTEPAD Key in HTML code then SAVE AS : filename.htm Understanding HTML Tags Set of codes to create documents Format text Place pictures / graphics on the page Create links to other pages Follow a certain syntax Each tag begins with < tag > symbol Most tags end with < / tag > symbol (some exceptions) Example: <HTML> … headings & body of web page … < /HTML > HTML Structure Tags Two main sections: Head section Body section HEAD SECTION Must contain a title 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 Should be brief, but descriptive Will show up as Title bar of web page Title cannot be formatted Title cannot be a link to other pages Use of Headings Use one large heading <H1> that is similar to title It will then appear as text in the web page There are six levels of headings <H1> … </H1> Largest font size <H2> … </H2> Next largest <H6> … </H6> Smallest font size Used to organize the body Think “Newspaper Headlines” Placing Text in a Document PARAGRAPH BREAKS Automatic paragraph break with Heading For other Paragraph breaks, use <P> tags LINE BREAKS 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 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 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: <H1 ALIGN=“Center” > Heading Message </H1> Results: Heading Message Creating Lists Bulleted list (unordered list) Numbered list (ordered) Unordered list 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: Indented Preceded by a bullet Unordered / Bulleted List EXAMPLE: <H3> Your Shopping List </H3> <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 Creating Lists Numbered list (ordered) Ordered list 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: Indented Preceded by a number Unordered / Bulleted List EXAMPLE: <H3> Your Shopping List </H3> <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 Formatting with Cascading Style Sheets Styles pre-define formats Allows changes to be made quickly All styles are defined in one place Makes for Global Formatting Changes made in one place affects all Best to put Style tag in HEAD section Cascading Styles Example: All Body text to be centered <HEAD> <STYLE type = “text/css”> Body {text-align: center} </STYLE> </HEAD> <BODY> etc … 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”> H1 {font-size: 36pt; color: red} H2 {font-size: 20pt; text-aligned: center} </STYLE> </HEAD> <BODY> <H1> MY FIRST WEB PAGE </H1> <! Heading font has been redefined > <! …etc … example of a comment … > (Will not show on page) </BODY> Syntax of STYLE tag <STYLE TYPE = “text/css”> H1 {font-size: 36pt; color: red} H2 {font-size: 20pt; text-aligned: center} </STYLE> Always use the attribute TYPE=“text/css” 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 Class used in two places 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) Class used in two places 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 Placing a line or ruler across the page Use the <HR> tag 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> <BR> <HR> </BODY> Result of Adding a Horizontal Line 10 Point Blue Line inserted Inserting Pictures / Graphics Can include universal formats .JPG .GIF (best for photographs) (most browsers accept this format) Use <IMG> Must use SRC=“filename” attribute for source EXAMPLE: <IMG SRC=“A:\picturename.jpg”> No closing tag Inserting Pictures / Graphics Can use ALT= alternate attribute to display EXAMPLE: <IMG SRC=“A:\picturename.jpg” ALT=“Company CEO”> 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) Height & Width are measured in pixels Float defines position (Left, Right, Center) Inserting Pictures / Graphics EXAMPLE using Height, Width, Float <IMG SRC=“A:\picturename.jpg” ALT=“Company CEO” HEIGHT= “200” Width = “40”> Better to use Classes for each image size <STYLE type=“text/css”> IMG.ceoPic1 {width: 40; height: 200; float: center} </STYLE> … body text … <IMG SRC=“A:\picturename.jpg” class=“ceoPic1” ALT=“Company CEO”> References http://www.w3schools.com/html/default.asp