1 of 13

HTML Basics

No CSS, just HTML

2 of 13

By the end of this unit you should be able to...

  • Explain what a basic set of tags will do in a browser
  • Create basic HTML elements on a page

3 of 13

Basic HTML template

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport"

content="width=device-width, initial-scale=1, maximum-scale=1">

<title>Exercise 0</title>

</head>

<body>

​

</body>

</html>

​

4 of 13

Different Tags for HTML Elements

Elements open by specifying a tag, then most have innerHTML, then close

​

<div>innerHTML is found here</div>

​

​

Some tags use no innerHTML

<img src="someLocation.jpg">

<br>

<input type="text">

(Note, using /> at the end is not required for example <br />)

​

​

Regardless of the tag type, all elements can have attributes

​

5 of 13

Attributes

Basic attributes (must know)

  • id - unique identifier for the element
  • class - list of identifiers that can be shared with other elements
  • style - something we'll discuss later

​

MANY tags can have specific attributes.

http://www.w3schools.com/html/html_basic.asp

​

Attributes modify an element to suit your specific needs.

​

6 of 13

Setup AppEngine for static submissions!

Make sure you have finished this lab first!

​

Setup your static file server (ie WebDev Link)

7 of 13

Tags and attributes practice

Instructions for the HTML Basics in this doc

HTML Basics - Tag Practice Exercises

​

Hint: Learning to use the documentation is more important than finishing quickly!

​

8 of 13

Document Object Model (DOM) example

<body>

<p>

This is a paragraph, containing

<a href="#"> a link </a>

in the middle.

</p>

<ul>

<li>This item has

<em>some emphasized text</em>

in it.

</li>

<li>This is another list item.</li>

</ul>

</body>

​

​

9 of 13

Draw this DOM tree

<body>

My favorite "Google look" gmail signature file.<br>

From Gmail: Settings -> General (first tab) -> Signature, then copy/paste from Chrome's display (without the dashes)<br>

<br>*** Some email body.***<br><br>

--

<table cellspacing="0">

<tbody>

<tr style="color:rgb(85,85,85);font-family:sans-serif;font-size:small">

<td style="border-top-style:solid;border-top-color:rgb(213,15,37);border-top-width:2px">

Dr. Dave Fisher&nbsp;

</td>

<td style="border-top-style:solid;border-top-color:rgb(51,105,232);border-top-width:2px">

|&nbsp;Rose-Hulman&nbsp;

</td>

<td style="border-top-style:solid;border-top-color:rgb(0,153,57);border-top-width:2px">

|&nbsp;

<a href="mailto:fisherds@gmail.com" target="_blank">

fisherds@gmail.com

</a>

&nbsp;

</td>

<td style="border-top-style:solid;border-top-color:rgb(238,178,17);border-top-width:2px">

|&nbsp;812-201-6488

</td>

</tr>

</tbody>

</table>

</body>

​

​

https://gist.github.com/fisherds/a27773b6857719a4b875

10 of 13

Space for your DOM tree

11 of 13

Output if you display that html in Chrome

12 of 13

Summary: HTML is the first step in building a site

Hopefully to feel comfortable with a wide variety of HTML tags

13 of 13