HTML Basics
HTML Coding
HTML Hypertext markup language The code used to create web pages
HTML Tags Text that appears between two angle brackets < > Text that tells the web browser how to display a web page’s content Do not see HTML tags in the browser window
Tag Sets Pairs of HTML tags Tells a browser where formatting should start and end
Starting tag Also called opening tag Defines the beginning of a particular tag Example: <strong> definitely red </strong>
Ending tag Also called closing tag Tells the browser where a starting tag ends Forward slash in the brackets indicates an ending tag Example: <strong> definitely red </strong>
Nested Tag A tag enclosed inside another set of tags Example <p> He <em> almost </em> won an award. </p>
Empty Tag A tag that only requires an opening tag Examples: <br> - line break <hr> - horizontal rule <img> - image
Source Code The text and HTML elements used to create a web page
Using a Text Editor
3 Main Parts of an HTML Document DTD (Document Type Definition) Header Body
DTD Specifies what version of HTML is used in your page
Header Provides info to the browser about your page Such as title and author Does NOT appear in the browser The TITLE is displayed in the browser’s title bar <head>, </head>
Body The tag set that encloses the code for the content you see displayed in the browser’s window <body>, </body>
Naming Files Keep file names descriptive but somewhat short Use the underscore (_) to indicate a blank space between words
File Name Extension Tells the computer what type of file it is reading Notepad automatically saves all files with a .txt extension Web browsers can’t read .txt Must change it to .htm
Attribute An instruction that further specifies a tag’s characteristics Allows you to assign colors, styles and alignment to a page Placed in opening tags Have a name, an equal sign (=) and a descriptor that MUST appear in quotes Must be in lowercase to meet specifications
Font Color Attribute Used to change the text color The descriptor specifies which color to use Example: <font color=“green”> grass </font> 16 named colors 216 hexadecimal colors
Background Color Attribute Used to specify a page’s background color by adding attributes to the <body> tag Example: <body bgcolor=“33cc33”>
Alignment Attributes Used to specify text alignment All text is automatically aligned to the left margin To change the alignment add an align attribute Example: <font align=“right”>
Heading Tags Used to break text into short, readable sections 6 different sizes: H1 – largest H6 - smallest
Lists Make text easier to read Adds visual interest to a page Helps readers identify key points on a page more quickly
2 Types of Lists Ordered List Unordered List Items that must appear in a certain sequence (numbered or lettered) Uses the <ol>, </ol> tag set Unordered List Items can appear in any order (bulleted) Uses the <ul>, </ul> tag set
Viewing an HTML Page It is important to view the web pages that you create in a text editor in a browser because Notepad does not show you how your web page will look
Enhancing and Testing Your HTML Page
Adding Images Using HTML Use the <img> tag to insert an image into a web page The <img> tag locates the image and displays it in a browser Consists of five (5) common attributes
src: specifies the source location of the image alt: gives the browser an alternative text message to display if the image is missing align: wraps text around an image border: places a border around an image width: specifies the image’s width height: specifies the image’s height src and alt should always be used when creating an image tag
Example <img src=”images/book.gif” alt=“books” align=“center” border=“0” width=“40” height=“30”>
Anchor Tag Creates a hyperlink around selected text <a>, </a> is the tag set used to create all links href is the attribute used to tell the web browser where it needs to go
Link Types Text Link: text a user clicks to activate a hyperlink Graphic Link: an image a user clicks to activate a link
Relative Link Example: <a href=“happy.html”> click here if you are happy </a> Code contains the name of the file being linked to Only works if the document being linked to is in the same web site folder as the document containing the link Links pages within the SAME web site
Absolute Link Example: <a href=“http://www.reallyhappy.com”> click here if you are really happy </a> Code contains the complete URL or path of the file being linked to Usually external links
Debugging Locating and correcting any obvious errors in your code as you are building the page
Testing Checking the page to make sure it displays as designed Allows you to double check the links are working properly The formal process of checking web pages for completeness and full functionality in a browser before launching it