Introduction to HTML:

Anatomy of a Website: All websites are made up of HTML files. HTML stands for HyberText Markup Language Websites are made up of other files too but we’ll get into those later. When you visit a website, the servers that you are connecting to will send you various files including an HTML file that your browser (chrome, firefox, etc.) will use to display the webpage you are trying to visit. You can view the HTML code of any website you visit since the file is sent to your computer. In Chrome, you can view the HTML code by right clicking and then selecting inspect.

HTML Code:

HTML Tags: An HTML file is a text file containing small markup tags. The tags tell the Web browser how to display the page An HTML file can be created by using a simple text editor. You will create HTML files using Notepad++ You can name HTML files whatever you want, you just need to make sure that the file name ends in .html

Anatomy of an HTML tag: Each tag has a “start tag”, “end tag”, some content in between, an optional attributes. Think of a tag as a “command” to the browser and of the attributes as modifiers of that command.

HTML Basics: The doctype isn’t an actual tag, but it needs to be at start at every HTML page to tell the browser which version of HTML you’re using (HTML5, in example below). The html tag is always the first tag in the page.

HTML Head & Body: The head contains “meta” information about the page, information that the browser needs before rendering it. The body contains the actual content of the page Most of the HTML code you will write will be contained within the body tag

HTML Tags: Header Tag: Acts as a header for information <h1> Biggest Header </h1> <h6> Smallest Header </h6> Paragraph Tag: Tag used to create paragraphs <p> The text within is a paragraph </p> Line Breaks: This tag has no corresponding end tag. It is used to create line breaks between content within paragraph tags.

HTML Tags Continued: You can also create lists with HTML. There are different types of lists you can use in HTML. Below is an example of one type of list. There are unordered lists <ul> <li> Item 1 </li> </ul> There are also ordered lists <ol> <li> Item 1 <li> </ol> Check out the differences on your own

HTML Tags Continued: For emphasized or italicized text use the em tag <em> Emphasized info </em> For important or bolded text you can use the strong tag <strong> Important Info! </strong> To places images in your HTML file you need to use the img tag and the src attribute.

HTML Links and Nesting: To create a link you need to use the a tag and the href attribute to determine which website the content will visit. <a href=“http://www.google.com”> Click this text and go to google </a> If you want to click an image to go to a particular website you can place an image tag within an a tag. Look at the example below.

HTML Resources: Sometimes a browser will be able to render HTML code even if there are errors or mistakes within the code. Don’t make a habit of counting on the browser to fix your code When you’re on your own and trying to code HTML, do a search for the tag you’re using (“img tag” or “li tag”) and you will usually find good references at the top. W3Schools is a simple to read reference with interactive examples & will often be the top result. The W3Schools HTML reference link is below: https://www.w3schools.com/tags/default.asp

HTML Assignment: Create a webpage that looks like the example to the right. Write the code for your HTML in notepad++ and make sure your file name ends in .html You can practice more HTML coding techniques on W3Schools.com