Using Html Basics, Text and Links
Objectives Develop a web page using HTML codes according to specifications and verify that it works prior to submitting –Create different types of links Interpret the meaning of html tags and attributes Identify common html tags, the proper syntax, and their purpose –Recognize and create special characters –Explain the difference between tags and attributes
HTML Not a programming language Hypertext Markup Language – text based formatting system for the web XHTML – latest version of HTML Platform independent
HTML Use a plain text editor to type your HTML text: Save your HTML page To see your page
Get ready
HTML Tags Start with a “ ” Usually in pairs. To view HTML tags: right click and “View Source”
File Structure tags: identify your file as an HTML file. –They begin and end every HTML document tags: indicate information about the document tags: appear on browser title bar - surround text
HTML Tags Properly nest HTML tags
XHTML To make your HTML document compatible with XHTML –Use the traditional version of –Extend the tag Copy the and found at the bottom of page 17 into the top of your web page
Sample 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Traditional//EN" "DTD/xhtml-trasitional.dtd"> <html xmlns=" xml:lang=en" lang="en"> Your Title appears here What happens to extra lines?
Tips Extra spaces –Use the Under_score or –Capital letters to separate words: UnderScore Use spaces in the document <html xmlns=" xml:lang=en" lang="en"> Is interpreted the same as one line
The Initial HTML File in Internet Explorer the title you entered between the tags address box indicates the name and location of the HTML file page content will appear here You should occasionally view the formatted page with different Web browsers to check compatibility, verify that there are no syntax errors, or other problems.
HTML Syntax Tags: control the appearance of the document content –the name of the HTML tag –attributes are –document content
Paragraph Surrounded by the and tags. A blank line is displayed before the text Text is wrapped
Line Break Moves text following this tag to the next line
Try this and see what happens <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml-transitional.dtd"> <html xmlns=" xml:lang=“en" lang="en"> Look at this text This shows what happens using the big tag. This shows bold text versus strong text plus use of the line break Next lets look at the italics tag the emphasis tag the teletype tag and finally the small tag
Creating Heading Tags Six levels of headings: through is the largest. Headings are displayed in a bold font.
Interpretation of the tag by Different Browsers This figure shows how three different browsers might interpret a line of HTML code.
Six Heading Levels This figure illustrates the general appearance of the six heading styles. Your browser might use slightly different fonts and sizes.
Special Characters Start with and end with
What do these represent? & < > © &plusmin; Table 3.1 page 27 in your book has a list
Math and Science Tags , superscript , subscript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1 -transitional.dtd"> <html xmlns=" xml:lang="en" lang="en"> Using more tags Sometimes special symbols are needed. For example: © to remind you not to make illegal copies or perhaps to make a footnote 1 so you won't be accused of plagiarism. Try this and see if your page looks like the next slide
Meta tags Information not defined by other tags and attributes Special instructions for Web server
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1 -transitional.dtd"> <html xmlns=" xml:lang="en" lang="en"> Meta Tags The page should change in a few seconds Sample with meta tags highlighted
Hypertext Links How do we create links like the ones in the assignment?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1 -transitional.dtd"> <html xmlns=" xml:lang="en" lang="en"> Linking Examples Of course you can link to other web pages The W3C site that develops protocols. You can also link to send to the instructor: Click here This image was inserted just for effect. We will learn how to do this later. Also you can link to other places within the same page. Use this link to go to the top of the page. Click here
Hypertext Links These links can point to: –another section –the same document –to a different document –to a different Web page –to a variety of other Web objects
Creating Hyperlinks Use tags –Sometines called link tags when creating links Default is underlined blue href attribute, Hypertext Reference, indicates location to jump to. click here to open a web site
Linking to Other Files click here to open the page click here to open a file in a different directory from your web page
Linking to adresses click here to send to the instructor
Hypertext Links You can place hypertext links at the top of a web page to make it easier for the user to navigate to a particular section of the document instead of scrolling.
Anchor Tags Anchor Tags The with the “name” attribute creates an anchor –Marks text or image so you can link to it –The id attribute is used with name Anchored text is the destination of a link; it is not the text you click on
How an Anchor Works anchor hypertext links When the user clicks one of the hypertext links, the link will go directly to that section (anchor, which is the destination of the link) within the web page.
Displaying Linked Documents in a New Window A Web page is displayed in the main browser window by default. To open in a new browser window, use the <a href=“url >Hypertext
Exercise 1:What will this display? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1 -transitional.dtd"> <html xmlns=" xml:lang="en" lang="en"> Exercise 1 Can you determine how this will look? You should be able to follow the clicks Microsoft's home page Have you had enough of this today: H 2 O ?
Exercise 2: How would you write this using HTML?
Test 1 Comments Objectives: 7.2 Recognize and identify components of the motherboard and their purpose 7.9 Identify the first computer programmer, first person to build a computer 7.10 Recall the history of the computers: before 1950, Internet, personal computers 9.1 Identify and apply the computer’s method of data representation 9.2 Add binary numbers 9.3 Distinguish between encoding schemes and numbering systems and their purpose 9.4 Determine the alphanumeric equivalent of an ASCII expression