Using Html - Basics, Text and Links

Using Html - Basics, Lists, Tables, Style W3Schools.com; Learn HTML Objective 2

Create this file for practice and to use in class

Type the following into a plain text editor such as Notepad or Notepad++ (TextEdit for Mac).
Save the file to your Z drive using extension htm or html; Ex Start_file.htm
Practice viewing and editing the file.

To view, go to the location where you saved the file and double click on the file. It should open in your default browser.

To edit the file, right click and open it in Notepad or Notepad++. You may have to browse the software to locate. Alternately, open Notepad then open the file by browsing to find your file.

<!DOCTYPE html>
<html>

<head>

<title> Webpage Title </title>

</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

Assigned Reading: Read Home through Lists

Practice the examples as you do the reading. Complete as many of the notes as possible.

Read the homework assignment prior to class so your questions can be answered.

Continue to next page!
Using Html - Basics, Lists, Tables, Style W3Schools.com; Learn HTML Objective 2

HTML Tags start with and end with called ______angle brackets______

To view HTML tags: right click and select “View Source”

General File Structure

<!DOCTYPE html

<html>

< >

< title > Appears on blue browser bar < /title

< >

Stuff that appears on the page goes here

< >

</html>

Always properly nest HTML tags. To allow HTML elements to contain other elements place the tags in the correct order: <tag1> <tag2> stuff </tag2> </tag1>

Instead of the simple html tag, usethe <!DOCTYPE htmltag as shownin the online examples.

Include all required tags

Use lowercase for all but the DOCTYPE tag

HTML Syntax: <a href=" The W3C site</a> {Identify the parts: tag, attribute,

attribute value, document contents}

Common Tags:

Special Characters are displayed using and ;- for ex, produces a space, and<yields. See HTML Entities in the online reading for more examples.

Links: to a file, email, URL

<a href=“FileOnSameComputer.htm”> click here for a local file</a>

<a href=“mailto:”> click here to send me email</a>

To insert an image:______src=“______” title=“______”alt=” “/>

Write in the tag to insert and image

The alt attribute is for text that should be displayed when the image is not available

The title attribute is used to display additional text when you hover the mouse over the picture

Lists, Tables, Style

List Types and the tags to create them

1.______

2.______

3.______

Tables

The following tags are used to create tables

______creates the table

______(table row) is used to define each table row

______(table data) identifies a table data cell (also shows columns)

______(table header) bolds and centers text (interchangeable with table data)

Another website that presents tablesfor your reference

Style (CSS)

Style Sheetsand what they affect

1. Internal/Embedded style -

located between the head tags

<style>

selector {property1:value1; property2;value2; ...}

</style>

Example: <style> h1 {color:blue} <style>

Note the word style is a tag in embedded style declarations

2. Inline style –located ______

<tag style=“style declarations”>

style declarations: “property1:value1; property2:value2”

Example: <h1 style = “color:blue”> text </h1>

Note: the word style is an ______in inline style declarations

Use the list-style-type attribute to change the default bullets of lists.

Bullet values for the unordered list: disc(default), circle, square, an image of your choice.

Partial values for OL: lower-alpha, lower-roman, upper-alpha, upper-roman, decimal

Locate style properties on the Internet. In addition to W3schools, see

Notes:

See HTML samples on my website

You might want to watch the following video

If you want to publish your web page: go to and request space if you have not already. You will need your Winthrop username and password (the same as your e-mail).