Intro to Web Development
Let's talk about tags. If you inspect this webpage, you will see a bunch of them! But what does <html> or <p> even mean? This session, we will be talking about the <html>, <head>, <body>, <title>, <p>, <h1, 2, 3, 4, 5, and 6>, <ol>, <ul>, <li>, <a>, <img>, and <video> tags! I know that seems like a lot, but you will never need to memorize all of them; if you forget how to embed a video or image into a webpage, or how to create a list or a link, you can always just quickly google it; what really matters is having a solid understanding of when and where you might want to use each tag, and understanding the sorts of things you can use HTML for!
<html>
This tag encompasses the entirety of the HTML code outside of the doctype html declaration. You have to both open it at the top of the page and close it at the bottom (close by writing the tag name again, but with a / between the < and the tag name (html in this case))
<head>
This tag includes the link to the css file (which we will discuss once we get to styling!), meta tags (we will discuss this later), and the title tag (see below).
<body>
This tag encompasses the body, which is where all visible content on the webpage goes. This includes the navbar!
<title>
This tag goes in the head and defines the title of your tab.
<p>
This tag is used for text on your webpage, including all of this text now! If something isn't a heading but is text, it's probably going to be stored inside of a p tag.
<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>
These are used for headings, like the one on the top of this page. The headings decrease in size from h1 to h6, with h1 being the largest and h6 being the smallest. h1 can be used for the main title of your page, while subsequent headings can be sub-headings or divisions of your page.
<ol>
Used to make an ordered list (1., 2., 3.), but requires child list elements. You can remember this because ol stands for ordered list!
<ul>
Used to make an unordered list (•), but requires child list elements. You can remember this because ul stands for unordered list!
<li>
Must have a parent ol or ul tag, used for elements of a list.
Example List
- item 1
- item 2
- item 3
<a>
This tag is used for links by attaching the href attribute (see example in index.html or below!). You can also attach the target="_blank" attribute to make the link open in a new webpage (example below).
<img>
Attributes for this tag are src, alt, width, and height. For width and height, see video. For src, that is the location of the image you are asking the img tag to display. If you are organizing your files, you will likely have an assets folder, so the path will be assets/img_name (placeholder). Alt is for the alternative text if the image can't be displayed or the webpage is being read by a screenreader.
<video>
Inspect index.html to learn about this tag!
Challenge #1: Now it's your turn to try some of these out! Head to over W3 schools' TryIt editor, and write a simple webpage with a head, title, body, heading, and paragraph tag. Next, create a list (ordered or unordered); this can be a todo list, a list of your favorite things, places you want to go, hobbies, etc.
Challenge #2: Let's try adding an image! First, find an image online; I will be using a bunny :) Then, open it in a new tab and copy the URL that shows up. Now, you can start writing your tag! Define a width or height using their respective properties, and set the src to the url you just copied. Finally, be sure to set the alt text with the alt attribute with a description of the image for screen readers. See below for an example!
