LEARNING HTML PowerPoint #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: Title Heading Paragraph “ ” are called tags Remember, tags usually end with a forward slash Ex. HTML Documents usually start with the DOCTYPE, html, and head tags HTML Documents usually end with and Adobe Dreamweaver adds these tags in automatically

HTML VOCABULARY HTML stands for H yper T ext M arkup L anguage 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 tags normally come in pairs like and 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 tags Source:

HEADINGS There are six headings in HTML: And so on… As you increase in number, the headers get smaller Click HERE to see examples of headingsHERE

PARAGRAPHS As you already know, paragraphs start and end with the tag If you want 2 paragraphs: First paragraph Second paragraph

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: Click here To open in a new window/tab: Click here The code above will display an output like this: Click here

IMAGES Images are defined with the tag Ex: 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:

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:

ATTRIBUTES Click here Anytime you see an “ ”, 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 tag The tag does not need to be closed with a forward slash Ex: This is a paragraph. This is a paragraph. This is a paragraph. Click here to see examples in the Try-it editor Click here

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

SUMMARY OF TAGS SO FAR Tells the browser that this is an HTML document Defines an HTML Document Defines the document's body to HTML headings Horizontal line Comment

LINE BREAKS Use the 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) This is a para graph with line breaks Output: This is a para graph with line breaks

TEXT FORMATTING Similar to Microsoft Word, you can format text in HTML The following tags can be used: - bold - Italics - computer output - subscript - superscript To see a sample in the Try-it editor, click herehere

HEAD 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 Title of the document HEADING Paragraphs here

TABLES Defined with the tag Tables must have a border to be seen as a table Divided into rows with and columns with Looking at the example, if you increase the border number, the thicker the border will be Headers use the tag: Example: Header 1 Header 2 row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 Header 1Header 2 row 1, cell 1row 1, cell 2 row 2, cell 1row 2, cell 2 Example in Try-It Editor

LISTS Bulleted lists are considered “unordered lists” ( ) Numbered lists are considered “ordered lists’ ( ) To make list items, we use the tag, in both types of lists Examples: Bullet #1 Item number 1 Bullet #2 Item number 2 Bullet #1 Bullet #2 1.Item number 1 2.Item number 2

WHAT’S WRONG HERE? This is bad HTML Bad HTML This is a paragraph 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? This is bad HTML Bad HTML This is a paragraph This is bad HTML Bad HTML This is a paragraph

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 HEREHERE