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