What is HTML and How to Use It
"Learn about HTML, tags, and creating a basic web page. Understand the required HTML tags, comments, formatting text, adding headings, and inserting images. Dive into the elements and structures of an HTML document to master web development."
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
HTML ROBERT MCINTOSH 12.08.2017
WELL 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
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. <!doctype html> <html> As you can see the html tag is below the doctype element. <head> After the html but before the closing html tag is the head and body. <title>This is the Title of the Page</title> The head tag is used to store information the browser will use and is never displayed to the user </head> <body> The body tag is where you put your content you want to be displayed to the user. <h1>This is the Body of the Page</h1> main browser window.</p> <p>Anything within the body of a web page is displayed in the Remember that the doctype tag is the first element and does not have an ending tag. </body> The next tag is the html tag and that the head and body tags are going to be inside the html tags. </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 <hr/>
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
