25
LEARNING HTML PowerPoint #1 Cyrus Saadat, Webmaster
| Date post: | 03-Jan-2016 |
| Category: |
Documents |
| Upload: | jonas-bradley |
| View: | 253 times |
| Download: | 1 times |
LEARNING HTMLPowerPoint #1
Cyrus Saadat, Webmaster
LEARNING AGENDA
• HTML Part 1 (This PowerPoint)• HTML Part 2
• HTML Part 3 / Introduction to HTML5
• HTML Part 4 / Introduction to CSS
• CSS Part 1
• CSS Part 2
• JavaScript Part 1
• JavaScript Part 2
• JavaScript Part 3
• Java Applet Integration
INSTRUCTIONS - DREAMWEAVER
• In your student directory, create a new folder called “0_ProgrammingClub”
• Open Adobe DreamWeaver on your computers• Found in the “Start > All Programs > Adobe Web” category
• Create a new HTML document
• Use the “Split” view, and click the “Live” button
• This is the “IDE” (Integrated Development Environment) in which you will be coding HTML
• Today, you should only be typing into the code view, and checking your progress by clicking in the design window
Your IDE should look something like this:
HOW IS AN HTML DOCUMENT MADE UP?Example code:
<!DOCTYPE html><html>
<head>
<title> Title </title>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph</p>
</body>
</html>
“<“ and “>” are called tags
Remember, tags usually end with a forward slashEx. </html>
HTML Documents usually start with the DOCTYPE,html, and head tags
HTML Documents usually end with </body> and </html>
Adobe Dreamweaver adds these tags in automatically
HTML VOCABULARY
• HTML stands for Hyper Text Markup Language
• HTML is a markup language
• A markup language is a set of markup tags
• The tags describe document content
• HTML documents contain HTML tags and plain text
• HTML documents are also called web pages
• HTML tags are keywords (tag names) surrounded by angle brackets like <html>
• HTML tags normally come in pairs like <b> and </b>
• The first tag in a pair is the start tag, the second tag is the end tag
• The end tag is written like the start tag, with a forward slash before the tag name
• Start and end tags are also called opening tags and closing tagsSource: http://www.w3schools.com/html/html_intro.asp
HEADINGS
• There are six headings in HTML:
• <h1>
• <h2>
• <h3>
• And so on…
• As you increase in number, the headers get smaller
• Click HERE to see examples of headings
PARAGRAPHS
• As you already know, paragraphs start and end with the <p> </p> tag
• If you want 2 paragraphs:
<p> First paragraph </p>
<p> Second paragraph </p>
HYPERLINKS
• Hyperlinks are used when you want the user to click on a certain text to take them to a certain web address
• The code is:
<a href=“http://www.example.com">Click here</a>
• To open in a new window/tab:
<a href="http://www.example.com" target="_blank"> Click here </a>
• The code above will display an output like this:
Click here
IMAGES
• Images are defined with the <img> tag
• Ex:<img src=“http://test.com/test.jpg" width=“300" height=“300">
The width and height attributes represent the amount of pixels the image takes up. If you want to resize the image, then make sure your height and width are proportional to the original.
If you want to keep the image in its original size:
<img src=“http://test.com/test.jpg">
SYNTAX AND MORE VOCABULARY
• HTML DOCUMENTS CANNOT HAVE ANY SPACES IN THEIR FILE NAME WHEN SAVED
• 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
• Most HTML elements can have attributes
Source: http://www.w3schools.com/html/html_elements.asp
ATTRIBUTES
<a href=“http://www.example.com">Click here</a>
• Anytime you see an “<a>”, it means there will be an attribute right after the main code
• In this case, “Click here” is the attribute to the link address
LINES
• Lines can be used in between paragraphs:
• They are defined by the <hr> tag
• The <hr> tag does not need to be closed with a forward slash
• Ex:
<p>This is a paragraph.</p><hr><p>This is a paragraph.</p><hr><p>This is a paragraph.</p>
• Click here to see examples in the Try-it editor
COMMENTS
• Like Java, Visual Basic, and any other programming language, programmers use comments to tell other programmers what they are doing in a certain section
<!-- Example comment-->
SUMMARY OF TAGS SO FAR
<!DOCTYPE html> Tells the browser that this is an HTML document
<html> Defines an HTML Document
<body> Defines the document's body
<h1> to <h6> HTML headings
<hr> Horizontal line
<!--> Comment
LINE BREAKS
• Use the <br> tags if you want to create a line break without starting a new paragraph
• Line breaks are also used to separate elements that do not already have a break, or to provide an extra blank line between elements • (Example_1.html)
<p>This is<br>a para<br>graph with line breaks</p>
Output:
This isa paragraph with line breaks
TEXT FORMATTING
• Similar to Microsoft Word, you can format text in HTML
• The following tags can be used:
<b> - bold
<i> - Italics
<code> - computer output
<sub> - subscript
<sup> - superscript
• To see a sample in the Try-it editor, click here
HEAD
• <title> defines the title of the document
• The title means what is seen by the user at the top of the browser
• Note that paragraph headers (h1, h2, h3, etc.) are NOT in the head section
<!DOCTYPE html><html><head><title>Title of the document</title></head>
<body><h1> HEADING </h1><p> Paragraphs here </p></body>
</html>
TABLES• Defined with the <table> tag
• Tables must have a border to be seen as a table
• Divided into rows with <tr> and columns with <td>
• Looking at the example, if you increase the border number, the thicker the border will be
• Headers use the tag: <th>
Example:
<table border="1"><tr><th>Header 1</th><th>Header 2</th></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>
Header 1 Header 2
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
Example in Try-It Editor
LISTS
• Bulleted lists are considered “unordered lists” (<ul>)
• Numbered lists are considered “ordered lists’ (<ol>)
• To make list items, we use the <li> tag, in both types of lists
• Examples:<ul> <ol><li>Bullet #1</li> <li>Item number 1</li><li>Bullet #2</li> <li>Item number 2</li></ul> </ol> • Bullet #1• Bullet #2
1. Item number 1 2. Item number 2
WHAT’S WRONG HERE?
<html><head><title>This is bad HTML</title><body><h1>Bad HTML<p>This is a paragraph</body>
• Find what’s wrong with this HTML document
• You should be able to find 5 things wrong here
• Browsers will read this page correctly, but this is BAD HTML and could cause more problems as you add more code
WHAT’S WRONG HERE?
<html><head><title>This is bad HTML</title><body><h1>Bad HTML<p>This is a paragraph</body>
<!DOCTYPE html><html><head><title>This is bad HTML</title></head><body><h1>Bad HTML </h1><p>This is a paragraph </p></body></html>
SUMMARY OF POWERPOINT
• HTML Structure
• Vocabulary
• Headings
• Paragraphs
• Hyperlinks
• Images
• Syntax
• Attributes
• Lines
• Comments
• Text Formatting
• Head
• Tables
• Lists
ASSIGNMENT
• Try to use all tags and elements incorporated in this PowerPoint• Use Dreamweaver to complete this task• DO NOT copy and paste from this PowerPoint, errors can occur
ASSIGNMENT #2 – IF TIME
• Let me know that you have completed Assignment #1
• Open your browser and login to your Weebly account
• Create a new website about the Review you wrote about the Software Application or Hardware device
• Using the “Embed Code” tool, copy and paste the HTML code you created in Dreamweaver
• Create an entire site about your “Software Application or Hardware Device”, using Dreamweaver to code in HTML and copying and pasting that code into Weebly
• For an example, CLICK HERE
