Default Element Behavior Headings, Paragraphs, Text Treatments, Lists, Etc

MULTIMEDIA TOOLS :: CLASS NOTES CLASS :: 07

10.23 2017 3 Hours AGENDA

MOCK-UP PRESENTATIONS :: Present your Photoshop Mock-Up 1. What is The Goal & Purpose of Website 2. Who is Your Target Audience? 3. What is Your Site’s Mood & Theme? 4. What is Your Color Scheme? … Quick justification for color choices… 5. Describe Your Logo 6. Explain How Your Image Gallery Will Work

INTRO TO HTML, HTML5, & DREAMWEAVER :: Web Terminology :: Root Folder Structure :: What is Adobe Dreamweaver? :: Workspace Familiarization :: Define Your Website :: Basic Webpage Structure :: Elements & Attributes

TEXT FORMATTING ELEMENTS :: Default Element Behavior [ headings, paragraphs, text treatments, lists, etc. ]

ANCHORS AWAY :: What is an anchor element? :: Basic Syntax :: Absolute Hyperlink :: Same Page Hyperlink :: Relative Hyperlink (test site)

INTRO TO HTML, HTML 5, & DREAMWEAVER 1 MULTIMEDIA TOOLS :: CLASS NOTES

:: Web Terminology [ DISCLAIMER: Simplified Definitions for Learning Purposes ]

HTML (Hypertext Markup Language):

Hypertext: Text that links to other information Markup: Set of mark up tags (i.e. , ,

, etc.) SEE BASIC WEBPAGE STRUCTURE SECTION

Web Page:

A single document/file comprised of markup language/code that gives instructions to the browser of how to display text, images, video, audio, and styling of web page sections. In this class, your webpages will have a .html file extension.

Web Site:

A webpage (or series of webpages) hosted on a server and visible on the Internet, Intranet and/or local browser.

FTP (File Transfer Protocol):

Protocol used to transfer (upload & download) files on the internet.

URL (Uniform Resource Locator):

Global address of documents and other resources on the World Wide Web

HTTP (Hypertext Transfer Protocol):

Protocol used by the World Wide Web. …directs the web server to fetch and transmit a webpage

definition sources: [ www.webopedia.com, www.w3schools.com, mybrain ]

2 MULTIMEDIA TOOLS :: CLASS NOTES

:: Root Folder Structure It is best to organize your files on your COMPUTER FIRST, theeeeeeeeeeeeeeen instruct DREAMWEAVER to define your web file structure.

Below is a basic file and folder set-up for your website. 1. The Website Folder (Contains all files required for your website) [CREATE] 2. The public_html (Serves as Your Root Folder) [CREATE] 3. The audio, js, & video folders will be created in later lessons. 4. The code_snippets folder is where you will save and grab code (shortcuts) for your web projects. [CREATE]

5. The images folder is where ALL of your image assets from your mock-up will be saved. [DUPLICATE FROM PSD ASSETS FOLDER(s)] 6. The remaining files are .html and .css: a. The about, contact, index, skills, and works .html webpages will make up your website*. b. The style.css document is used to add styles (fonts, layout, animation, etc.) to your webpages.

*Pages may vary by student

:: What is Adobe Dreamweaver®?

An Adobe® software program created for web authoring. Basic use includes designing webpages (using HTML and other languages), plus uploading webpages to a live server (via FTP).

The advantages of Dreamweaver are: 1. Coding & Uploading (other text editors may offer authoring only) 2. Code Hints: Dreamweaver assigns colors to elements. This allows you to quickly analyze elements and discovers errors quicker. 3. WYSIWYG (“What You See is What You Get) Editor – (i.e. pick font colors, styles, hyperlink, etc.) 4. Built-in functions for creating menus, templates, and fluid layouts for responsive design.

NOTE: Many designers, employers, and institutions use Dreamweaver for authoring and publishing websites; however, the program is not necessary for coding and uploading websites. Designers may use other text/web editor programs to write, test, & publish HTML pages + supporting code (CSS, JavaScript, PHP, etc.) ::

ALTERNATIVE TEXT EDITORS:

PC: Notepad, Notepad++, Sublime Text, UltraEdit MAC: Text Wrangler, Sublime Text, UltraEdit, CoffeeCup

ALTERNATIVE FTP RESOURCES: Filezilla, Fetch, Web Host Interfaces

NOTE:: Most of the above programs are FREE or offer a FREE TRIAL

:: Workspace Familiarization

1. Open Dreamweaver and Create a new HTML5 Document:

a. Go To Menu Bar > File > New b. Select Blank Page (if needed) c. Page Type: HTML c. Layout: None d. DocType: HTML5 e. Click Create

2. Click Through:

a. Menu Bar b. Code – Split – Live/Design View c. Files Panel ( MAC [ function + F8] ) or ( WINDOWS [F8] ) d. Go to Menu Bar > File > Save As… > Browse To yourwebsite.com > code_snippets > Save As…”index.html” e. Expand View - Show local and remote(live) site. [ You must be connected to the remote server to see your live webspace. Let’s Do This! ]

:: Define Your Website

Define A Site: Establish/reestablish a root folder and file structure within Dreamweaver

Defining a site enables Dreamweaver to: organize files based on your root folder, update multiple pages based on your changes, and synchronize your local files with the remote (live) server.

SEE CLASS HANDOUT :: or :: VIEW LINK BELOW

URL: http://iris.nyit.edu/~dmyrick/DGIM601-W01/docs/defining-a-website.pdf

:: Basic Webpage Structure

REQUIRED ELEMENT TAGS TO RENDER AN HTML WEBPAGE:

:: Elements & Attributes

ELEMENTS (Source: w3schools):

o HTML Documents are made with HTML Elements o Most (but not all) HTML Elements are written with a start tag, an end tag, & (in many cases) content in between. o HTML Elements may contain other HTML Elements NOTE: In the above image, the html element starts with an opening tag The tag contains 3 elements: head, title, and body The tag will always contain a tag Each of these elements require a start and end tag, i.e. <html> </html> 5 MULTIMEDIA TOOLS :: CLASS NOTESATTRIBUTES (Source: w3schools): o HTML Elements can have attributes o Attributes provide additional information about an element o Attributes are always specified in the start tag o Attributes are written with a name & value pair, i.e. name=”value” o An example of an html element with an attribute appears as follows ::<html lang=”en”> For an explanation of this element & attribute name/value, see table belowBASIC HTML5 WEBPAGE STRUCTURE (DEFINITIONS) | BREAKDOWN:HTML CODE EXPLANATION<DOCTYPE! html> Tells browser what type of html page will be displayed. Must be declared before the opening <html> tag. The doctype shown in the left column represents HTML5.<html lang="en"> Opening tag for html Followed by lang attribute Followed by “en” value html for language = english<head> Opening tag for head<meta charset="utf-8"> Meta tags are data about data (May include page description, keywords, etc.) In this example, the meta tag is informing the browser to use utf-8 (a Unicode system of characters)<title>Words on Browser Tab Opening tag for title Title of page Closing tag for title

Closing tag for head

Opening tag for the body element

Words words words words words. All content to be seen on the page, will Text, text, more text. exist within the body element tags

Closing tag for body

Closing tag for html

TEXT FORMATTING ELEMENTS

:: Default Element Behavior [ headings, paragraphs, text treatments, lists, etc. ] Tag (Element Overview): http://www.w3schools.com/tags/ref_byfunc.asp

a. Type the following code INSIDE the … tags

This is the tag for the bold text element
Tag for italic text element
Tag for the underline text element

This is the tag for the paragraph element. Paragraph elements are block elements. Block elements by default inherit a top and bottom margin (or padding). Paragraphs end with what is similar to a line break (automatic return) in Microsoft Word. Elements following a paragraph, by default, start on their own line.

This is the tag for creating an unordered list:

This is the tag for creating an ordered list:

b. Preview your text in the Browser [File > Preview in Browser > Chrome] c. Save in code_snippets folder As… “code_text-formatting.html”

ANCHORS AWAY

:: What is an anchor element? [ Creating Hyperlinks: http://www.w3schools.com/tags/tag_a.asp, http://www.w3schools.com/html/html_links.asp ]

o The anchor element is used to hyperlink an element, text, or image to a web location o The anchor (start and end) tag appears as follows: o The anchor tag requires a hypertext reference attribute and accompanying value o The hypertext reference attribute and value pair appears as follows: href=”weblocation” o The web location may exist on the same page, another page, or an image

:: Basic Syntax

Clickable Text or Image

Opens Anchor The hypertext Equal sign Where you want to Closes An element, image, or End Tag the start element reference required go… the start text must exist between for the tag attribute before the tag the start and end anchor anchor value is tag. This element, image, element declared or text is viewable in the browser ”weblocation Clickable Text < a href = > ” or Image

:: Absolute Hyperlinks (reference to live web URL)

o Link to a page referencing a URL Address (absolute): http://www.amazon.com (automatically loads the index page at “www.amazon.com”) http://iris.nyit.edu/~nyitusername (automatically loads the index page inside the “~nyitusername” folder) http://iris.nyit.edu/~nyitusername/file.html (references a file inside the “~nyitusername” folder) http://iris.nyit.edu/~nyitusername/file.html#top (references a named anchor “#top” on the file.html webpage)

:: Same Page Hyperlinks (reference location on the same page)

o Create a page with a named anchor (id) called “top” o Create 3 paragraphs with back to top hyperlinks after each paragraph o The hyperlinks will are referencing “#top” named anchor

1. Create an HTML5 page 2. Save As… > code_snippets > code_same-page-anchor.html 3. In order to create a same page anchor, you are required to have:

a. A Named Anchor (the point on a webpage the visitor jumps to): The Named Anchor serves as a jump to point for hyperlinks (much like creating a bookmark in a MS Word document). element with an attribute of id. THE id attribute should have a name as the value. The name may be anything you wish. Ensure the name is lowercase and without spaces. Your anchor element will appear as follows (NO TEXT OR IMAGE WITHIN TAGS) TYPE THE FOLLOWING ON YOUR PAGE:

b. An Anchor element (the hyperlink element the visitor clicks). # tells the browser to search for a reference on the same page. The # is followed by the id name you created as a jump to point.

I. Create a paragraph with 777 words using emmet short cut code: First type the short cut, then hit Tab key

(p>lorem777)+a [TAB]

II. Scroll down to anchor element, then ADD the hashtag and named anchor inside of the href value quotes

Back To Top

III. Copy and Paste the Paragraph and Anchor Elements 2 more times NOTE: paragraphs will be long enough to activate a vertical scroll bar in the browser.

4. SEE NEXT PAGE FOR CODE EXAMPLE

------EXAMPLE------

This is paragraph one. It should be a long paragraph…. You may insert approximately 100 lines of text here. You may use any ipsum language as a dummy placeholder to test. Lorem Ipsum text may be copied from here: http://www.lipsum.com/

This is paragraph two. It should be equally as long as paragraph one. You may copy/paste an additional 100 lines of ipsum here. Different ipsum types may be copied from here:

This is paragraph three. It may be a long paragraph as well…. If you click on the hyperlink text in step a., your browser window Should jump to this point.

:: Relative URL Hyperlinks (files exist in the same website/folder structure)

o Link to another page, located inside the same folder: “file.html” o Link to another page, located one folder level above current file: “../file.html” o Link to a another page, located inside a another folder: “folder-name/file.html” o Link to a page, located one level above current file AND inside a another folder: “../folder-name/file.html” ( for 2 levels… “../../folder-name/file.html” ) o Link to an image, located in the folder named “images”: “images/artwork.jpg”

NOTE: - For Relative Links: MAKE SURE ALL .html files are in the same folder structure - When naming files, DO NOT USE SPACES :: To separate words in a file name, use hyphens or underscores, i.e. “my-skills.html” or “my_skills.html”

You will create a navigation menu to demonstrate how relative links work. Your navigation will be located at the top of all your code_ html files You will use the header, nav, and anchor elements to complete this exercise…

URL: http://www.w3schools.com/tags/tag_a.asp

STEPS FOR CREATING A BASIC NAVIGATION MENU::

1. Create a New HTML5 Document 2. Save (in code_snippets folder) As… “index.html” NOTE: This index.html will exist inside your code_snippets folder - different from your public index page. If you type in http://iris.nyit.edu/~yourusername/code_snippets, the index.html file inside the code_snippets folder will display. This index file may serve as your landing page for code snippets

3. HTML CODE [ type the following code ver batim after the opening tag ]: Code Snippets Homepage | Text Formatting Tags | Same Page Links |

4. Preview Page in Browser and test all links. IF THE LINKS DON’T WORK: a. Ensure the href values are spelled the same as the filenames. b. Ensure you match cases (upper and lowercase matters in HTML) c. Ensure the file is in the location you are pointing to: Check your code_snippets folder

5. If all links work, copy the entire header element, then paste the header just below the opening tag in the following files:

index.html (the index inside of your code snippets folder), code_text-formatting.html, & code_same-page-anchor.html

6. Test in Browser

Homework HW-7 DUE :: 10.30

REVIEW ::

1. Class Notes 2. Folder/File Set-Up 3. Dreamweaver CC Workspace Overview URL: https://helpx.adobe.com/dreamweaver/using/dreamweaver-workflow-workspace.html

[OPTIONAL]: Dw CS6 Workspace Overview URL: http://tv.adobe.com/watch/learn-dreamweaver-cs6/workspace-overview

o HTML Intro Tutorial [ See Right Column ] Complete Tutorial :: HTML HOME – HTML Formatting o Convert 1 Original Video (@ 30 seconds or less) http://www.w3schools.com/html/default.asp into 3 different formats [for web publishing]

Format One: .mp4 Format Two: .webm Format Three: .ogv (.ogg)

NOTE: For easy online conversions, file size may have to be 100MB or less.

ONLINE CONVERSION SOURCES: 1. URL: http://www.zamzar.com/ Cycle Pages by Clicking: 2. URL: http://www.online-convert.com/ Next Chapter >> 3. URL: https://www.onlinevideoconverter.com/

NOTE: For offline conversions, unlimited file size, you may download the following free software: 1. Handbrake [ web optimized .mp4]: https://handbrake.fr/downloads.php] 2. VLC [ all formats ]: https://www.videolan.org/vlc/ ]

o Convert 1 Audio Track into Two Formats Format One: .mp3 Format Two: .ogg

ONLINE [ URL: http://www.zamzar.com/ OR http://www.online-convert.com/ ]

o Bring Your Social Media Login Info [Preview of Next Week] [ URL: http://iris.nyit.edu/~dmyrick/DGIM601-W01/embedmedia.html ]

SEE HOMEWORK PAGE FOR COMPLETE DETAILS

BRING :: HW-7

Video files for web 1 [.ogv(.ogg), .mp4, .webm] Audio files for web 2 [.ogg, .mp3]

3 Social Media Login Info

Default Element Behavior Headings, Paragraphs, Text Treatments, Lists, Etc

The tag for the heading 1 text element

The tag for the heading 2 text element

The tag for the heading 3 text element

The tag for the heading 4 text element

The tag for the heading 5 text element

The tag for the heading 6 text element

YOU’VE ARRIVED TO THE TOP

YOU’VE ARRIVED TO THE TOP