Web 101 intro to html
- 1. Web 101: Intro to HTML
- 2. Outline • What is HTML? • Webpage Structure • What is an Element? • Common HTML elements • Commenting HTML
- 3. Learning Outcomes • Basic knowledge of Web Design using HTML • Create a simple web page using the fundamental HTML Elements • Display images on a web page • Including external web pages • Basic page layout techniques
- 4. What is HTML? • A markup language for describing web documents (web pages). • Stands for Hyper Text Markup Language • A markup language is a set of markup tags • HTML documents are described by HTML tags • Each HTML tag describes different document content
- 5. HTML Example <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
- 6. HTML Tags • Keywords (tag names) surrounded by angle brackets: – <tagname>content</tagname> • Usually come in pairs like <p> and </p> • The first tag in a pair is the start tag, the second tag is the end tag • The end tag is written like the start tag, but with a slash before the tag name
- 7. Web Browsers • Read HTML documents and display them • The browser does not display the HTML tags • Uses tags to determine how to display the document • Examples – Chrome, IE, Firefox, Safari, Opera, Edge
- 9. <!DOCTYPE> Declaration • Helps the browser to display a web page correctly. • Different document types exist • Browser must know both type and version. • The doctype declaration is not case sensitive. <!DOCTYPE html> <!DOCTYPE HTML> <!doctype html> <!Doctype Html>
- 10. Common Declarations • HTML5 – <!DOCTYPE html> • HTML 4.01 – <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> • XHTML 1.0 – <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
- 11. HTML Versions Version Year HTML 1991 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 2000 HTML 5 2014
- 12. What is CSS? • Used with HTML to style the page. • No CSS Today! • Will be covered in the WEB 102 : Intro to CSS
- 13. Editors • Basic Editors – NotePad – TextEdit – Vim • Power Editors – Sublime Text – Brackets • Professional Editors – Microsoft WebMatrix – DreamWeaver
- 14. Brackets Demo
- 15. HTML Document <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
- 16. Exercise 1 : Document • Let’s start by defining the basic structure of your website. • Create a new folder for your work called “web101”. • Then inside this folder create a new file called “index.html”. • open and close a set of <html></html> tags • Within this, create the head and body tags • If you load this in your browser, do you see anything on the page? • Now inside your head tag create a <title> tag with I love owls as your title. • You should see that the tab bar has changed. If not, double check your code.
- 17. Solution 1 <!DOCTYPE html> <html> <head> <title>I love Owls</title> </head> <body> </body> </html>
- 18. HTML Heading <h1>This is a heading1</h1> <h2>This is a heading2</h2> <h3>This is a heading3</h3> <h4>This is a heading4</h4> <h5>This is a heading5</h5> <h6>This is a heading6</h6>
- 19. HTML Paragraph • Putting content into a <p> tag will break your text up into paragraphs. • This helps make the content of your page easier to read for the user. <p>This is a paragraph.</p> <p>This is another paragraph.</p>
- 20. Exercise 2: Paragraphs • Add a h1 heading tag, which includes the word Owls, inside the body tag of your page. • Add the following paragraph inside your <body> tag, after the <h1>: <p> Most birds of prey sport eyes on the sides of their heads, but the stereoscopic nature of the owl's forward-facing eyes permits the greater sense of depth perception necessary for low-light hunting. </p>
- 21. HTML Links <a href=http://www.meetup.com/learnsoftwaredevelopment>Us on Meetup</a> • A link lets the user click through to another webpage. • The href attribute is used to indicate where you want the user to go when the link is clicked
- 22. Exercise 3: Links • Let’s add a link to the bottom of your paragraph: <a href="http://en.wikipedia.org/wiki/Owl">More information about owls...</a>
- 23. HTML DIV • A div tag lets you group elements together. • Grouping elements is useful as we can later style them together (e.g. giving them all the same colour).
- 24. Exercise 4 : DIV • Wrap your existing paragraph and link in a div and add a new heading to it. <div> <h1>Owls</h1> <p>Most birds of prey sport eyes on the sides of their heads, but the stereoscopic nature of the owl's forward-facing eyes permits the greater sense of depth perception necessary for low-light hunting. <a href="http://en.wikipedia.org/wiki/Owl">More information about owls...</a> </p> </div>
- 25. HTML List • There are two types of lists that can included on a webpage, – ordered and unordered. • An unordered list <ul> is defined with bullets • An ordered list <ol> uses a numbered sequence.
- 26. Exercise 5: Lists • Let’s create a new <h2> then underneath list the reasons we love owls: <h2>Why do I like owls so much?</h2> <ol> <li>they are adorable</li> <li>and lovely</li> <li>and cuddly</li> </ol>
- 27. HTML Images • Images are primarily made up of three attributes • the <img> tag – src attribute lets the page know what image we want to view – alt attribute provides extra information if the image cannot be seen on the webpage for any reason • to see an image on the webpage we need to link to the image • this involves telling the webpage where it is and what it is called.
- 28. Exercise 6: Images • Before the main heading of the page, add a logo image • The src of the image points to the images folder • We have given it a relevant alt attribute <img src="images/logo.png" alt=”Some logo ">
- 29. Exercise 7 • Let’s add some more images. This time, we’ll put them in a list. • Do this underneath the <h2>Why do I like owls so much?</h2> heading. <ul> <li><img src="images/img1.jpg" alt="adorable"></li> <li><img src="images/img2.jpg" alt="lovely"></li> <li><img src="images/img3.jpg" alt="cuddly"></li> </ul>
- 30. Formatting Text • Text can be emphasised or made important. • Use <strong> for emphasis, • Use <em> for importance
- 31. Exercise 8: Formatting • Let’s emphasise some of the content of your paragraph <p> Most birds of prey sport eyes on the sides of their heads, but the stereoscopic nature of the owl's forward-facing <strong>eyes permits the greater sense of depth perception</strong> necessary for low-light hunting. </p>
- 32. HTML Commenting • You can use a special kind of tag to add notes to our page that the computer will ignore. • Comments are particularly useful when wanting to remind yourself, or other programmers, how your code works. <!-- Note to self: this is where the header goes -->
- 33. Exercise 9: Twitter Share Link • Add a share on twitter link along with your other sharing links <a href="http://twitter.com/home?status=I love HTML! via @hawkmanacademy">Share your love HTML on twitter</a>
- 34. Questions
- 35. Resources • HTML elements – https://developer.mozilla.org/en/docs/Web/HTML/Element • Special characters – http://htmlandcssbook.com/extras/html-escape-codes • The Bare Bones Guide to HTML – http://werbach.com/barebones/barebones.html • Web Design Frameworks – Bootstrap - http://getbootstrap.com/ – Bootstrap Themes - http://wrapbootstrap.com/
Editor's Notes
- #6: The DOCTYPE declaration defines the document type to be HTML The text between <html> and </html> describes an HTML document The text between <head> and </head> provides information about the document The text between <title> and </title> provides a title for the document The text between <body> and </body> describes the visible page content The text between <h1> and </h1> describes a heading The text between <p> and </p> describes a paragraph Using this description, a web browser can display a document with a heading and a paragraph.
- #10: <!DOCTYPE html> <!DOCTYPE HTML> <!doctype html> <!Doctype Html>
- #27: If you wanted to make this an unordered list, what would you change? How could you check it worked? Try it, then change your list back to an ordered list.