Introduction to HTML
A Web Page is.. An ASCII (text) file.. Whose filename ends with.htm or.html –index.html or cookie-recipe.htm Contains HTML tags and the text content that is in that page.
HyperText Markup Language The language in which most Web pages are written An ASCII text file is marked up using HTML tags and the Web browser renders the page. HTML document has a.html or.htm extension HTML tag: item to be formatted As in: Welcome to My Page Attributes are not always available in a tag
Making of a HTML Page My First Page The tags and contents that make up the page body
Viewing Your Web Page On your local hard drive (personal viewing/previewing) On your Web account on a Web server (need to upload the file and set permissions) If you have graphics, sound files, etc. that your page refers to, you will need to upload them too
Tags within –When you want to place a title of the page in the title bar. –When you want to set the default font size to a size other than 3 (the default); value is – or –To include additional info about the page –
Other HTML tags Comments: Paragraph Groupings: text separates a paragraph of text another by some vertical space (Section) Headings: through Paper Title in a Large Font Tiny subsection heading ALIGN is optional and can have a value of left, right, or center
Other HTML tags Boldface Word or words to be bolded or use * Italics Word or words to be in italics or use * Underline Word or words to be underlined Superscript and Subscript text text * the tag makes a page more accessible
An Overview of Other Useful Tags Horizontal Rules –Used to draw a horizontal line across the screen –There is no ending tag X and Y are in pixels or as a percentage of screen
An Overview of Other Useful Tags Ordered Lists (Numbered list) for each list item Unordered Lists (Bulleted list) for each list item
Image Tag <IMG SRC=image filename <IMG SRC=logo.gif ALT=text description ALT=Company Logo HEIGHT=pixel value HEIGHT=50 WIDTH=pixel value> WIDTH=70> <IMG SRC= ALT=Company Logo of Blue Flower HEIGHT=50% WIDTH=70%> Percentage values are relative to the size of the browser window
Adding Style to Lists You can use your own graphic in place of the bullet in an unordered list – just use the image tag in place of the list item tag. item 1 item 2
Color Can use names or numerical values, though names can vary among browsers Numerical values are hexadecimal (base 16) representing the mixture of primary colors: hexdigit1 hexdigit2 hexdigit3 hexdigit 4 hexdigit5 hexdigit is black, 0000FF is blue, FFD700 is gold Red Green Blue
Color Setting text color for whole document ….. Setting Backgrounds … or …..
Coloring Text <BODY BGCOLOR=#FFFFFF TEXT=#FF0000 LINK=#00FF00 VLINK=#FFA500 ALINK=#800080> ….. Refers to the text of the page Unvisited links Visited links A link that the user has placed the mouse over and pressed the button down (but not released)
Formatting Segments of Text To change the color of a segment of text Main Menu To change the size of a segment of text W elcome Appears as: W elcome Fonts can be changed too, but are not always supported