1. Basic HTML Hyper text markup Language

2. Re-cap  … - The tag tells the browser that this is an HTML document The html element is the outermost element in HTML documents. The html element is also known as the root element.

3. Re-cap  … - Contains information about the page.  …. - Displays the title at the top of the window. Always goes inside the element  …. - Contains the body of page

4. Re-cap  The to tags are used to define HTML headings. defines the most important heading. defines the least important heading  …. - It defines a paragraph. The element automatically creates some space before and after itself  - inserts a single line break

5. Lesson Overview  In this lesson, you will learn to:  Create Hyperlinks to connect web pages.  Format text within a Web page.  Creates tags with attributes.  Text alignment and horizontal ruler

6. What is the most important part of a web page

7. Hyperlinks

8. Where are we going with class assignments?

10. Class assignment 5 HTML tag line breaks, paragraphs and header

11.  Open notepad  Using the header paragraph and break html tags that you have learned, create the web page shown next  Save the code that you just created as “charles.html” in the folder “Web design\class assignments”  Access the file and open it.  Debugging tip: save html file in notepad. Use refresh (F5) button on your browser to see changes in code.

13. Hyperlinks

14. Class assignment 6 HTML hyperlinks

15.  Open file “twocities.html” in the folder “Web design\class assignments” in notepad.  Make sure that “Charles.html” is in the same folder as “twocities.html”

16. Modify file “twocities.html” as highlighted below A Tale of Two Cities Charles Dickens

17.  Save file “twocities.html” in the folder “Web design\class assignments” in notepad.  Make sure that “Charles.html” is in the same folder as “twocities.html”  Open “twocities.html” in web browser.  Click on hyperlink ‘Charles Dickens’

19. Hyperlink tag  The tag defines an anchor. An anchor can be used in two ways:  To create a link to another html document, by using the href attribute  To create a bookmark inside a document, by using the name attribute

20. create a link to another html document Connect a Web page to other Web sites and Web pages on the Internet We call them links/hyperlinks and use ANCHOR element Example of a link tag: Microsoft The word Microsoft is displayed in the Web page and hyperlinked to the Microsoft Web site The attribute “target” has been added The “target=“ _blank” ” attribute tells the browser to open the Microsoft Web page in a new window

21. Class assignment 7 HTML hyperlinks

22.  Open file “Charles.html” in the folder “Web design\class assignments” in notepad.  Make sure that “twocities.html” is in the same folder as “Charles.html”  Modify code of “Charles.html” to link to “twocities.html”  Add target attribute to in order to open “twocities.html” in a new window

24. Re-cap hyperlinks (also known as anchor tags)  …. - Anchor tag. Creates hyperlinks  microsoft creates hyperlink to a website  Open file creates a hyperlink to a file in the same directory

25. Re-cap hyperlinks (also known as anchor tags)  Ope n file In another directory creates a hyperlink to a file in the directory c:\webdesign  Open file on a share creates a hyperlink to a file in the directory \\lhssvr\homedirs\webdesign

26. Class assignment 8 HTML hyperlinks

27.  Create a folder “assignment8” in the folder “Web design”.  Create a file “firstlink.html”  Add, and tags to it. Remember you need to open tags and close each tag.  Create a hyperlink to http://www.microsoft.com

28. Type this code into a Notepad document and save it as firstlink.html new title Microsoft

29. create a bookmark inside a document  Connect within the same page.  When would that make sense?  Example of an anchor:  Sub Title  Link to an anchor:  Go to section Sub Title  Note the # sign that makes it a local link

30. Class assignment 9 HTML hyperlinks

31.  Copy file “Charles.html” in the folder “Web design\class assignments” and paste it.  Rename new file to “Charlesmenu.html”  Modify code of “Charlesmenu.html” to create a menu  Link menu to its corresponding section in the same document.

32. Modify file “Charlesmenu.html” Early Life …… Early years

34. Review  Which tag do use for hyperlinks?   What is an attribute?  Additional data that is associated with a tag  Which attribute do use with the anchor tag to specify an anchor?  AnchorText  Which attribute do use with the anchor tag to specify an hyperlink?  HyperLink Text  How do you reference an anchor within the same HTML page?  Hyperlink Text