Hyper text markup Language Basic HTML Hyper text markup Language
Re-cap <html> … </html> - The <html> 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 <head>…</head> - Contains information about the page. <title>….</title> - Displays the title at the top of the window. Always goes inside the <head> element <body>….</body> - Contains the body of page
Re-cap The <h1> to <h6> tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the least important heading <p>…. </p> - It defines a paragraph. The <p> element automatically creates some space before and after itself <br/>- 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 Ask one kid to sketch what other kids describe (magazine page that sketcher can’t see) Look at result—shortcomings? Sketch is probably not super-accurate Need a very specific, accurate page description language—HTML
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 <h1>A Tale of Two Cities</h1> <h2> <a href="charles.html">Charles Dickens</a> </h2>
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 <a> 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: <a href=“http://www.microsoft.com” target=“_blank”>Microsoft</a> 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 <a> in order to open “twocities.html” in a new window
Re-cap hyperlinks (also known as anchor tags) <a>….</a> - Anchor tag. Creates hyperlinks <a href=“http://www.microsoft.com”> microsoft</a>creates hyperlink to a website <a href=“filename.html”>Open file</a> creates a hyperlink to a file in the same directory
Re-cap hyperlinks (also known as anchor tags) <a href=“c:\webdesign\filename.html”>Open file In another directory</a> creates a hyperlink to a file in the directory c:\webdesign <a href=“\\stephanial\webdesign\filename.html”>Open file on a share</a> creates a hyperlink to a file in the directory \\stephanial\webdesign
Class assignment 8 HTML hyperlinks
Create a folder “assignment8” in the folder “Web design”. Create a file “firstlink.html” Add <html>, <head> <title> and <body> 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 <head> <title>new title</title> </head> <body> <a href=“ http://www.microsoft.com”>Microsoft</a> </body> </html>
create a bookmark inside a document Connect within the same page. When would that make sense? Example of an anchor: <a name=“subtitle”>Sub Title</a> Link to an anchor: <a href=“#subtitle”>Go to section Sub Title</a> 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” <a href="#Early">Early Life</a><br/> …… <h3><a name="Early">Early years</a></h3>