<html><head><title>Basic HTML PowerPoint</title></head><body>
How Hyper Text Markup Language Works</body></html>
Saving Properly
• When creating a web site, you always need to create a new folder for each site.
• Go to your G:drive and create a new folder• Name it assignment 1• Each different assignments you must make
a new folder and always save your .html files and images in that folder.
Basics of HTML
• 2 ways to view a webpage– Web view is how the browser interrupts your code (how
you normally view web pages). The purpose of a web browser (like Internet Explorer, Firefox, Chrome, etc) is to read HTML documents and display them as web pages.
– Source code view is the written text that is created by the web designer. The source code for any webpage can be viewed .
• HTML tags are written between angle brackets (< >) and most tags will usually come in pairs like <i> and </i>
Basics of HTML cont.• The first tag in a pair is called the opening tag
(<i> ) and the second is called the closing tag (</i> **note the “/”)
• The browser does not display the HTML tags, but uses the tags to interpret the content of the page.
• Tags order matters! If you open the tags one way then it must reverse when closed.• Example: <b><i>Hello World</i></b>
• Tags are not case sensitive
Basics of HTML cont.
• All HTML documents start with <HTML> and end with </HTML>
• Every HTML webpage has 2 sections which are denoted by HTML tags– <Head>– <Body>
• The Head section will always open & close before the Body section opens
Basics of HTML – Head Section
• Head section– This section always begins with <head> and ends with
</head>– This section will not be visible in the body of the web
browser– The name of the webpage that appears in the title bar is
placed in this section• Example: <title>My First Page</title>
• Others elements can be placed in this section but we will go over those in a later lesson
Basics of HTML – Body Section
• Body Section– Information displayed in this section will be
displayed in the body of the web browser
– The closing body tag will always proceed the closing HTML tag.
Basics of HTML – Saving• How to save as HTML
– File -> Save As -> (the name you want the file to be).html
– When you save as .html this tells the computer that this file should be opened by a browser
– If using a simple text editor, typing .html manually is required
– Example:MyFirstPage.htmlMyFirstPage.doc
- Will open as a webpage
- Will not open as a webpage
Basics of HTML – REVIEW
<html><head><title>Webpage title</title></head><body>My first webpage</body></html>
Starts every HTML page
Info in this section will not appear in the body of the web browser
Info in this section will appear in the body of the web browser
Ends every HTML page
Meta Tags
• HTML meta tags are officially page data tags that lie between the open<head> and closing </head> tags in the HTML code of a document.
Meta Tags
• Here's a code example of meta tags:• < head>
< title>Not a Meta Tag, but required anyway < /title>< meta name="description" content="Awesome Description Here">< meta http-equiv="content-type" content="text/html;charset=UTF-8">< /head>
Description Meta Tag
• This is what the description tag looks like:• < meta name="description"
content="Awesome Description Here">• The “description” meta tag helps websites in
three important ways:– Tells the search engine what your page or site is
about– Helps you click through rates to your site– Helps with ranking your site
Review of HTML • <html>• <head>• <title>Titles the browser</title>• <meta name=“description”
content=“Description goes here”>• </head>• <body>• </body>• </html>
<html><head><title>Best Practices in HTML PowerPoint</title></head><body>
HTML Best Practices</body></html>
Best Practices in HTML
Best practice refers to a set of unofficial guidelines that developers follow in order to make sure that they do the best quality work. This is not only to make their lives easier but also to help others understand what you have done and, when you run into trouble, help you quickly.
Best Practices in HTML
– Close all tags that should be closed• Occasionally you can get by without closing certain
tags without any repercussions but it is a good habit to always close the tags that should be closed
– Write tags in all lowercase• Case does not matter in HTML, but when you learn
XHTML (which is lowercase sensitive) you will have an easier time transitioning
– Keep pictures proportional • HTML tags can resize pictures but avoid stretching
pictures
Best Practices in HTML
– Closing tags should be a mirror image of opening tags
• Occasionally tag order can be wrong but still work; proper order must be followed. If you bold, italicize, & then underline text make sure the closing tags are underline, italics, & then bold
– ExampleWorks but NOT correct:
<b><i><u>Some Text</i></b ></u>
Works and is correct:
<b><i><u>Some Text</u></i ></b>
<html><head><title>Styling in HTML PowerPoint</title></head><body>
How to style in HTML</body></html>
Styling in HTML
• Styling tags can be added to HTML to place emphasis or add appeal– These tags must be closed
• <b> … bold• <i> … italics• <u> … underline• <p> … starts and ends paragraphs; creates 1 blank line
– These tags do not have to be closed• <br /> … line break• <hr /> … horizontal rule; creates a straight line across
the page
Styling in HTML cont.
– Heading tags must be closed
• <h1> … Largest heading tag• <h2> … 2nd largest heading tag• <h3> … 3rd largest heading tag• <h4> … 4th largest heading tag• <h5> … 2nd smallest heading tag• <h6> … smallest heading tag
Styling in HTML –REVIEW
• Code View:<b>My name is…</b><i>The Great Gatsby</i><u>See Spot Run</u><p>Earth</p><p>Mars</p>
<hr />Yellow<br /> Bird
<h1>About us</h1><h6>What to do now?</h6>
• Browser ViewMy name is…
The Great Gatsby
See Spot Run
Earth
Mars
YellowBird
About usWhat to do now?
<html><head><title>Lists in HTML PowerPoint</title></head><body>
How to create lists in HTML</body></html>
Creating Lists in HTML
• 3 types of lists– Unordered list
• Bulleted items
– Ordered list • Numbered items
– Definition List• a list of items, with a description of each item
Unordered Lists in HTML
• The tag for a bulleted list is <ul> & </ul>• Each item is surrounded with the open and close
<li> tag (li = list item)• Bullets can be changed to squares or circles with the
optional code type=“square” or type=”circle” in the <ul> tag.– Code View
<ul><li>Milk</li><li>Eggs</li></ul>
-- Browser View
• Milk• Eggs
Ordered Lists in HTML
• The tag for a numbered list is <ol> & </ol>• Each item is surrounded with the open and close
<li> tag (li = list item)• List items will be numbered• Numbers can be changed to a, A, i, or I with the optional code
type=“a”, type=“A”, etc in the <ol> tag.– Code View
<ol><li>George Washington</li><li>John Adams</li></ol>
-- Browser View
1. George Washington2. Johns Adam
Definition Lists in HTML
• The tag for this list is <dl> & </dl>• Each term is surrounded with the <dt> tag and each
description is surrounded with the <dd> tag
– Code View<dl><dt>Electron</dt> <dd>- carries a negative electric charge</dd><dt>Neutron</dt> <dd>- carries no electric charge</dd></dl>
-- Browser View
Electron
- carries a negative electric charge
Neutron
- carries no electric charge
Lists in HTML –REVIEW
• Ordered lists <ol> produce numbered lists• Unordered lists <ul> produce bulleted lists• Each item in an ordered list & unordered list is
surrounded with the <li> tag• Definition lists <dl> produce terms with definitions• Each term in a definition list is surrounded with the
<dt> tag and each description is surrounded with the <dd> tag.
Assignment
• HTML Assignment #1
Top Related