HTML Robert McIntosh 12.08.2017
We’ll Learn What HTML is What tags are What a basic web page looks like What 3 HTML tags are required What HTML comments look like How to title your web page How to format the text on your web page How to create heading on your web page How to add pictures to your web page
HTML Hyper Text Markup Language How your program the internet! HTML: is the set of markup symbols or codes inserted in a file intended for display on a World Wide Web browser page. The markup tells the Web browser how to display a Web page's words and images for the user. HTML is a formal Recommendation by the World Wide Web Consortium (W3C) and is generally adhered to by the major browsers.
Elements / tags Elements are identified with like this “< >” Most elements come in pairs, meaning they have a starting and ending tag. For Example, a starting paragraph tag looks like this “<p>” and an ending tag looks like this “</p>” These tags are not displayed to the user when viewing the web page, instead they tell the browser the user is using, what information is stored in these elements. The browser then applies default styles or looks to the user based on the tags.
<!doctype html> Required tags Every web page requires that you have at least the following tags <!doctype html> Should be the very first thing at the start of your page This tag does not require an ending tag <html></html> Should be directly under the “doctype” tag <head></head> Should be contained within the <html> tags and the first tag after the <html> tag <body></body> Should be contained within the <html> tags and be after the closing </head> tag
Basic web page This is the Title of the Page This is the Body of the Page Anything within the body of a web page is displayed in the main browser window. Basic web page The yellow code on the left is HTML tags and will not be displayed to the user when they view your website. As you can see the html tag is below the doctype element. After the html but before the closing html tag is the head and body. The head tag is used to store information the browser will use and is never displayed to the user The body tag is where you put your content you want to be displayed to the user. Remember that the doctype tag is the first element and does not have an ending tag. The next tag is the html tag and that the head and body tags are going to be inside the html tags. <!doctype html> <html> <head> <title>This is the Title of the Page</title> </head> <body> <h1>This is the Body of the Page</h1> <p>Anything within the body of a web page is displayed in the main browser window.</p> </body> </html>
Comments Comments are lines of code the user can’t see. They are used to explain what your html is doing, who wrote it and when it was written. You are able to put comments anywhere in your code. They are never displayed to the user An example of a comment is <!-- Web page created by Robert McIntosh --> <!-- December 12, 2017 --> A comment starts with < and is followed by and ! and two dashes. A comment is ended with two dashes and a >
Title Element This element only exists inside the head tags This tag changes the text that is displayed in the users browsers tab. An example of a title element is <title> My Homepage </title>
HTML ELements Ttile Tag What It Does Example Paragraph <p>…</p> Creates paragraphs of text <p>I’m my own paragraph</p> Line Break <br/> Acts as if you hit enter inside of your content. I’m line 1. <br/>I’m line 2. Bold <strong>…</strong> Makes the text bold <strong>I’m Bold</strong> Italic <em>…</em> Makes the text italic <em>I’m Italic</em> Horizontal Rule <hr/> Adds a line across the container
Headings Creates different sections for your page. A heading element looks like <h#> where you replace the hashtag with a number ranging from 1 to 6 1 is the BIGGEST and 6 is the smallest heading. Headings are used to identify import content or transitions of content on a page. An example of a heading element is: <h1>My heading</h1>
Images Adding images to your web page requires a specific element. This element is called the image tag. The image tag is unlike the paragraph and heading tags, because it does not require a ending tag. The image tag use attributes to specify where it is getting an image and what the image is used for.
Images… An image tag looks like the following: <img src=“me.jpg” alt=“Picture of Robert McIntosh”/> Notice how the image tag does not include </img> but instead ends with “/>” These types of tags are called self closing tags.
Attributes Attributes tell us more about elements, they provide additional information about the contents of an element. They appear on the opening tag of an element and are made up of a name and value pair separated by an equals sign. In our image example above, src=“me.jpg” src is our Attribute Name “me.jpg” is our attribute value
Your Assignment Create a new folder called “xxProject 1” Where xx is your initials In this folder you are to create a new item and name it index.html You are to build an an html page using all required html elements. Set the title of your webpage to Your Name – Project 1 Add 2 comments right after the doctype element The first one should be your name The second one should be the date Inside the body tags add 2 headings Title the first one “My School” Title the second one “My Favorite Class” – I don’t expect it to be this class
Your Assignment… Separate the headings with a horizontal rule Find a picture of a school (use google images), download it and put into your project folder inside an images folder. Link to this image using an img element. This link should be after your heading and horizontal rule for “My School” but before your heading for “My Favorite Class” Add a paragraph element with at least 5 sentences to the “My School” section of your page Add a paragraph element with at least 5 sentences to the “My Favorite Class” section of your page