Embed Size (px)
Citation preview
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
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▫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
