Basic HTML Hyper text markup Language

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.

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

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

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

What is the most important part of a web page

Hyperlinks

Where are we going with class assignments?

Class assignment 5 HTML tag line breaks, paragraphs and header

 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.

Hyperlinks

Class assignment 6 HTML hyperlinks

 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”

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

 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’

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

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

Class assignment 7 HTML hyperlinks

 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

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

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

Class assignment 8 HTML hyperlinks

 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

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

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

Class assignment 9 HTML hyperlinks

 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.

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

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