Scribd
Upload
3 views30 pages

HTML

The document provides an introduction to web design, focusing on HTML and how web pages operate. It explains the roles of servers and clients, the structure of HTML, and various HTML elements such as tags, lists, and tables. Additionally, it includes practical exercises for creating a basic webpage and enhancing it with images, links, and navigation bars.

Uploaded by

plug2303
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views30 pages

HTML

The document provides an introduction to web design, focusing on HTML and how web pages operate. It explains the roles of servers and clients, the structure of HTML, and various HTML elements such as tags, lists, and tables. Additionally, it includes practical exercises for creating a basic webpage and enhancing it with images, links, and navigation bars.

Uploaded by

plug2303
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 30

+

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.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy