HTML

Basic HTML Tags

<h1> Big header </h1> <!-- Header 1: Large bold text --> <p> First paragraph </p> <!-- Paragraph: For a block of text --> <p> More text </p> <br> <!-- Break: Go to the next line --> <p> Even more text </p>

Big Header

First paragraph

More text


Even more text

- Header tags also include h2 through h6, with a smaller text size for larger numbers

- The <br> tag can also be used within a paragraph tag

Division Tags

<div id="myDiv"> <!-- Nest other elements here --> </div>

- Dividing a page into grouped sections enables targeted styling, jumping to sections, and specifying where to perform certain code scripts

Hyperlinks

<a href="www.___.com"> My display text </a> <!-- Link to another URL --> <a href="#sec5"> My display text </a> <!-- Jump to another part of the page with id "sec5" -->

- A hyperlink is a clickable segment of text that can send the user to another page or section when clicked

- A link to a section of the page is useful for pages with a lot of content to scroll through

- For the link example to work, you must have an element with an id of "sec5" (e.g. <div id="sec5">...</div>)

Span Tags

Here is <span style="color:blue">an example</span> for you
Here is an example for you

- This is for setting apart a segment of text, so that you can style it or make it interactive

- For example, you can change the color of the selected text by setting the color attribute in the span element. <span style="color:blue">

Interactive Elements

<input type="text"> <!-- An input field for a word or line --> <button type="button"> My Label </button> <!-- A button that says "My Label" --> <textArea> My default text </textArea> <!-- A resizeable area for inputting multiple lines of text -->

- See the JavaScript lessons to learn how to make use of user input

Images

<img src="myPath/myImage.png" alt="My description">

- The "alt" attribute it to provide a description in case someone can't load the image, or for accessibility

- If the image is in the same folder as the HTML file, just put the file name as the source with no path

- Various image formats are accepted (e.g. *.png, *.jpg, *.svg, ...)

Checkboxes

<label> <input type="checkbox" name="myCB" value="my_v_1"> <!-- First selectable value --> My Option 1 </label> <br> <label> <input type="checkbox" name="myCB" value="my_v_2"> <!-- Second selectable value --> My Option 2 </label>

- Checkbox selections allow for more than one value to be selected at a time

- To be grouped together as options for the same selector, they must have the same name value

- You can add checked="checked" as an attribute if you want it to be selected by default

Radio Buttons

<label> <input type="radio" name="myRadio" value="my_val_1" checked="checked"> <!-- First selectable value --> My Option 1 </label> <br> <label> <input type="radio" name="myRadio" value="my_val_2"> <!-- Second selectable value --> My Option 2 </label>

- Radio selections only allow for one value to be selected at a time

- To be grouped together as options for the same selector, they must have the same name value

- You should set the checked="checked" attribute in the one that you want to be selected by default

Select Dropdowns

<select> <option value="my_val_1" > My Option 1 <option> <!-- First selectable value --> <option value="my_val_2" > My Option 2 <option> <!-- Second selectable value --> </select>

- This will create a dropdown with two selectable options

- The value attribute can be a more convenient label when used in scripts

Challenge

Create a web page with a large header that says Quiz 1. Add three quiz questions, one that is multiple choice with four options but can have only one answer, another question with four options that allows for multiple answers selected and has two correct answers, and a third question that takes a written answer of a few sentences. Add an extra three lines of space between each question section. Add a button that says "Submit". At the bottom of the page, add a link that will bring the user to the top of the page.

Completed