Download presentation
Presentation is loading. Please wait.
1
HTML Basics
2
HTML Coding
3
HTML Hypertext markup language The code used to create web pages
4
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
5
Tag Sets Pairs of HTML tags
Tells a browser where formatting should start and end
6
Starting tag Also called opening tag
Defines the beginning of a particular tag Example: <strong> definitely red </strong>
7
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>
8
Nested Tag A tag enclosed inside another set of tags Example
<p> He <em> almost </em> won an award. </p>
9
Empty Tag A tag that only requires an opening tag Examples:
<br> - line break <hr> - horizontal rule <img> - image
10
Source Code The text and HTML elements used to create a web page
11
Using a Text Editor
12
3 Main Parts of an HTML Document
DTD (Document Type Definition) Header Body
13
DTD Specifies what version of HTML is used in your page
14
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>
15
Body The tag set that encloses the code for the content you see displayed in the browser’s window <body>, </body>
16
Naming Files Keep file names descriptive but somewhat short
Use the underscore (_) to indicate a blank space between words
17
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
18
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
19
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
20
Background Color Attribute
Used to specify a page’s background color by adding attributes to the <body> tag Example: <body bgcolor=“33cc33”>
21
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”>
22
Heading Tags Used to break text into short, readable sections
6 different sizes: H1 – largest H6 - smallest
23
Lists Make text easier to read Adds visual interest to a page
Helps readers identify key points on a page more quickly
24
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
25
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
26
Enhancing and Testing Your HTML Page
27
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
28
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
29
Example <img src=”images/book.gif” alt=“books” align=“center” border=“0” width=“40” height=“30”>
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
31
Link Types Text Link: text a user clicks to activate a hyperlink
Graphic Link: an image a user clicks to activate a link
32
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
33
Absolute Link Example: <a href=“ click here if you are really happy </a> Code contains the complete URL or path of the file being linked to Usually external links
34
Debugging Locating and correcting any obvious errors in your code as you are building the page
35
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
Similar presentations
