1 / 33

Basic HTML

Basic HTML. H yper t ext m arkup L anguage. 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.

gloria
Download Presentation

Basic HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Basic HTML Hyper text markup Language

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

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

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

  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?

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

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

  11. Hyperlinks

  12. Class assignment 6 HTML hyperlinks

  13. 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”

  14. Modify file “twocities.html” as highlighted below <h1>A Tale of Two Cities</h1> <h2> <a href="charles.html">Charles Dickens</a> </h2>

  15. 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’

  16. 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 hrefattribute • To create a bookmark inside a document, by using the name attribute

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

  18. Class assignment 7 HTML hyperlinks

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

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

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

  22. Class assignment 8 HTML hyperlinks

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

  24. Type this code into a Notepad documentand save it as firstlink.html <html> <head> <title>new title</title> </head> <body> <a href=“http://www.microsoft.com>Microsoft</a> </body> </html>

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

  26. Class assignment 9 HTML hyperlinks

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

  28. Modify file “Charlesmenu.html” <a href="#Early">Early Life</a><br/> …… …… …… …… <h3><a name="Early">Early years</a></h3>

More Related