Basic HTML PowerPoint How Hyper Text Markup Language Works.

<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.


– 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


– 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

Date post:	13-Jan-2016
Category:	Documents
Upload:	martin-stokes
View:	225 times
Download:	0 times

Basic HTML PowerPoint How Hyper Text Markup Language Works.

Documents