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.

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  www.birdnest.org www.birdnest.org

HTML Tags  Start with a “ ”  Usually in pairs.  To view HTML tags: right click and “View Source” http://www.northwest.com/

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="http://www.w3.org/1999/xhtml" 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="http://www.w3.org/1999/xhtml" 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="http://www.w3.org/1999/xhtml" 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="http://www.w3.org/1999/xhtml" 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="http://www.w3.org/1999/xhtml" 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="http://www.w3.org/1999/xhtml" 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 e-mail 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 e-mail adresses  click here to send e-mail 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="http://www.w3.org/1999/xhtml" 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

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.

Similar presentations

Presentation on theme: "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."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

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.

Similar presentations

Presentation on theme: "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."— Presentation transcript:

Similar presentations

About project

Feedback