+
Web Design
An Introduction to the basics of HTML
+
How the Internet Works
The Internet is a network of
millions of computers
Every computer on the
Internet is connected to every
other computer on the
Internet through Internet
Service Providers (ISPs)
+
How Web Pages Work
Servers: machines that provide
services to other machines
Clients: machines that connect to
servers
Client asks for an HTML file at a certain
address (the URL) using a browser
Server returns HTML file
Client parses the file by reading HTML
tags and displays a web page
+
What is HTML?
Hyper Text Markup Language
Instructions that tell the browsers how to show the stuff on
your web page
Examples:
amazon.com facebook.com
+
Interpreted Language
Unlike C, HTML is “interpreted” instead of “compiled”
Interpreted programs are converted to binary on the fly each
time they are run
Compiled programs don’t have to be. They can be converted
to an executable form once, and then keep running from
their binary form.
Fun Fact: Java is both. The compiler converts Java to Bytecode
(intermediate language), which is then interpreted by the
Java Virtual Machine (JVM). This allows Java to be machine
independent.
+
Webpages are browser dependent
A website opened in Safari may look different than one
opened in Internet Explorer
+
HTML Tags
Instructions in HTML are called tags
This is what tags look like:
<tag> = Opening tag - tells the browser where a section begins.
</tag> = Closing tag - tells a browser where the section ends.
Generally, some content goes between them.
+
HTML Element
An HTML element is everything from the start tag to the end
tag:
An HTML element starts with a start tag / opening tag
An HTML element ends with an end tag / closing tag
The element content is everything between the start and the
end tag
Some HTML elements have empty content
Empty elements are closed in the start tag
+
Let’s Create an HTML file!
Create a folder with your name on your desktop
Open Notepad++ under programs.
Create a text file called “test.html”
This is where you will program your website.
Make sure the document is saved with a .html extension
+
The Basic Web Page
<html>
<head>
<title> (Your title goes here) </title>
</head>
<body>
(Your content goes here)
</body>
</html>
Tells the browser to interpret the text as html.
Everything on your webpage goes between these tags
Tells browser additional info about your page.
Marks the main content of the page.
+
Try it!
Create the basic webpage
Come up with a title
Copy commands that were shown
Remember:
<html>…</html> tags enclose everything on your web page
<head>… </head> tags enclose <title>…</title> tags and
<title> tags enclose the name of your website.
<body>… </body> should enclose the rest of the website’s
content.
+
Here is a Reference
<html>
<head>
<title> (Your title goes here) </title>
</head>
<body>
(Your content goes here)
</body>
</html>
+
Not Done Yet…
You will need more commands to display the page properly.
Header
Create a header for your web page.
Enclose it with <h1>… </h1> – this will increase the size of the text
and bold it.
To make the header a different size, you can use the tags <h2>…
</h2>, <h3>…</h3>, <h4>…</h4>, <h5>...</h5>, or <h6>…</h6>.
Add <h3> tags around “Favorites”
Paragraph
To mark the start and end of a paragraph, enclose it with <p></p>
You can add <br/> tags to add line breaks in your paragraph. Unlike
the others, this is an empty tag – nothing needs to go inside it.
+
Your Code Should Look Similar to This
<html>
<head>
<title> (Your title goes here) </title>
</head>
<body>
<h1> (Header goes here) </h1>
<p>
(Paragraph goes here) <br/>
</p>
</body>
</html>
+
More Commands!
You have now created a basic website.
Here are more commands to make it even more organized.
<hr> </hr> creates a horizontal line.
Used to divide different sections of your website.
<blockquote> </blockquote>
Used for long quotes
+
Creating Lists: Ordered Lists
There are 3 types of lists: ordered, unordered and definition
lists
Ordered Lists
Used to mark lists that are numbered.
Example:
1. Brush Teeth
2. Shower
3. Eat Breakfast
Take this form:
<ol>
<li> Brush Teeth </li>
<li> Shower </li>
<li> Eat Breakfast </li>
</ol>
+
Creating Lists: Unordered Lists
Unordered Lists
Used to mark bulleted lists.
Example:
• Milk
• Cookies
• Cup
Take this form:
<ul>
<li> Milk </li>
<li> Cookies</li>
<li> Cup </li>
</ul>
+
Creating Lists: Definition Lists
Definition Lists
Groups terms and definitions into a single list
Example:
Stargate Atlantis
Awesome Sci-Fi show about the lost city of Atlantis
Parks and Recreation
Hilarious mockumentary about staff members of a Parks and Rec department
How I Met Your Mother
Comedy about Ted Moseby, his friends and how he met his wife
Take this form:
<dl>
<dt> Stargate Atlantis </dt>
<dd> Awesome Sci-Fi show about the lost city of Atlantis </dd>
<dt> Parks and Recreation </dt>
<dd> Hilarious mockumentary with Amy Pohler </dd>
<dt> How I Met Your Mother </dt>
<dd> Funny comedy starring Neil Patrick Harris Jr. and Jason Segel </dd>
</dl>
+
Practice Creating Lists!
Create an ordered, unordered and definition list
Here’s suggested content for your lists
Put the Harry Potter books in an ordered lists
Put Harry’s friends in an unordered list
Find Harry’s favorite spells and their definitions, and put
them in a definition list.
+
Here’s some code to help you
<html>
<head>
<title> (Your title goes here) </title>
</head>
<body>
<ol>
<li> Book 1 </li>
<li> Book 2 </li>
<li> Book 3 </li>
</ol>
</body>
</html>
+
Tables
Components: <table>, <tr> and <td>
<table> </table> : Mark the start and end of table
<tr> </tr> : Mark the start and end of a row
<td> </td> : Mark the start and end of table (data) cell
The following code will create a 2X2 table:
<table>
<tr>
<td> First Name </td>
<td>Last Name</td>
</tr>
<tr>
<td> Harry </td>
<td> Potter </td>
</tr>
</table>
+
Links
Form: <a href = “url”> Link Text </a>
Example:
<html>
<head>
<title> (Your title goes here) </title>
</head>
<body>
<a href=“youtube.com”> Visit me! </a>
</body>
</html>
+
Images
Form: <img src=“url” alt=“some_text”/>
<html>
<head>
<title> (Your title goes here) </title>
</head>
<body>
<img src=“hp.jpg” alt=“Harry Potter”/>
</body>
</html>
+
Youtube Videos
Go to youtube
Find your video and click “share”.
Click “embed”.
Copy and paste code to your .html text file
+
Navigation Bar
Form:
<nav>
<a href=“url1”> Link 1 </a>
<a href=“url2”> Link 2 </a>
<a href=“url3”> Link 3 </a>
</nav>
NOTE:
The url in the navigation bar is to .html files you’ve created
+
style
Adds “style” html elements
Form: <html_element style= “some_css” > </html_element>
Example:
<html>
<head>
<title> (Your title goes here) </title>
</head>
<body style=“background-color:yellow;”>
.
.
.
</body>
</html>
+
<div>
Defines a division or section in HTML document
Used to group things to style them
Form: <div> </div>
Example:
<div style=“color: green;”>
<h1> This is a green header</h1>
<p> This is a green paragraph</p>
</div>
+
HTML Attribute
Attributes provide additional information about HTML
elements.
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value”
style is an example of an attribute
+
Block Vs. Inline Elements
There are "block" elements and "inline" elements.
Block elements are chunks of content that form a rectangle,
or block, such as paragraphs, tables, block quotes, bulleted
lists, numbered lists, and list items. They all start on a new
line.
Inline elements, in contrast, do not start a new line. Links and
images fall into this category.
+
Project
Create (at least) 5 pages: main, favorites, family, quotes and
goals
Have at least one picture in each page
Include a navigation bar
Include 2 links
Include 1 video
Optional: Style to your webpage.
Note: Don’t worry if you can’t finish. We will continue
improving our websites for the rest of the week.
