multimedia web design class notesiris.nyit.edu/~dmyrick/dgim759/docs/class8.pdf · [duplicate from...

MULTIMEDIAWEBDESIGN CLASSNOTES

1

CLASS :: 08

03.27

2020 3 Hours

AGENDA 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)


2

INTRO TO HTML, HTML 5, & DREAMWEAVER :: Web Terminology [ DISCL AIMER: Simp lified Defin itio n s fo r L earn in g Pu rp o ses ]

HTML (Hypertext Markup Language): Hypertext: Text that links to other information Markup: Set of mark up tags (i.e. <html>, <body>, <h1>, <p>, 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 ]


3

:: 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 & video folders (For audio and video files) [CREATE] 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


4

:: 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. Built-in functions for creating menus, templates, and fluid layouts for responsive design. 4. Emmet short codes for creating elements: https://docs.emmet.io/cheat-sheet/

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! ]


5

:: 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/dgim759/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 <opening> tag, an end </closing> 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 <html> tag The <html> tag contains 3 elements: head, title, and body The <head> tag will always contain a <title> tag Each of these elements require a start and end tag, i.e. <html> </html>


6

ATTRIBUTES (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 below

BASIC 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</title> Opening tag for title Title of page Closing tag for title

</head> Closing tag for head

<body> Opening tag for the body element

Words words words words words. Text, text, more text.

All content to be seen on the page, will exist within the body element tags

</body> Closing tag for body

</html> Closing tag for html

7

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 <body>…</body> tags

 <b>This is the tag for the bold text element</b>  <br> <em>Tag for italic text element</em>  <br> <u>Tag for the underline text element</u> <h1>The tag for the heading 1 text element</h1> <h2>The tag for the heading 2 text element</h2> <h3>The tag for the heading 3 text element</h3> <h4>The tag for the heading 4 text element</h4> <h5>The tag for the heading 5 text element</h5> <h6>The tag for the heading 6 text element</h6> <p>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.</p>

<blockquote> The tag used to format text as quoted words in a research paper. The browser will indent the group of words and add blank space to the top and bottom of text to separate it from the parent element </blockquote>

This is the tag for creating an unordered list: <ul> <li>This is the tag for a list item</li> <li>By default, list items are formatted with a bullet</li> <li>List items are block elements; existing on its own line; followed by a line break (automatic return) </li> </ul> This is the tag for creating an ordered list: <ol> <li>This is the tag for a list item</li> <li>Inside of the ordered list element, by default, list items are formatted with a number</li> </ol> <hr> This is a tag for creating a horizontal line. No closing tag is required 

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


8

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: <a></a> 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

<a href =”weblocation”>Clickable Text or Image</a>

Opens the start

tag

Anchor element

The hypertext reference attribute

Equal sign required

before the value is declared

Where you want to go…

Closes the start

tag

An element, image, or text must exist between the start and end anchor tag. This element, image, or text is viewable in the

browser

End Tag for the anchor element

< a href = ”weblocation” > Clickable Text

or Image </a>

:: 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)


9

:: 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). <a> 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: <a id=”top”></a>

<h1>YOU’VE ARRIVED TO THE TOP</h1>

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 [HIT TAB KEY] NOTE: There is no space after the letter “a”

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

<a href=”#top”>Back To Top</a> 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


10

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

<a id=”top”></a> <h1>YOU’VE ARRIVED TO THE TOP</h1>

<p> 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/ </p> <a href=”#top”>Top of Page</a>

<p> 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: </p> <a href=”#top”>Top of Page</a>

<p>

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. </p> <a href=”#top”>Top of Page</a>


11

:: 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…

<a> 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 <body> tag ]:

<a href=”index.html”>Code Snippets Homepage</a> | <a href=”code_text-formatting.html”>Text Formatting Tags</a> | <a href=”code_same-page-anchor.html”>Same Page Links</a> |


12

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


13

Homework HW-8

Prior to Embed Media Lesson 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

DO ::

o HTML Intro Tutorial [ See Right Column ] o Make Sure You Bring Your Videos Converted Into

3 Different Formats [for web publishing] SEE Convert Tutorials: LESS THAN 100MB - ONLINE CONVERT - (all): http://iris.nyit.edu/~dmyrick/dgim759/rummage-codes.html#ol-convert OVER 100MB – HANDBRAKE - (.mp4 only): http://iris.nyit.edu/~dmyrick/dgim759/rummage-codes.html#mp4 OVER 100MB – VLC - (.mp4, .ogv, & webm): http://iris.nyit.edu/~dmyrick/dgim759/rummage-codes.html#vlc 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/ 2. URL: http://www.online-convert.com/ 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/dgim759/embed-social-media.html ]

o Ensure Your Photoshop CC Mock-Up Generated Assets: an images folder [SEE TUTORIAL]:

Complete Tutorial :: HTML HOME – HTML Formatting http://www.w3schools.com/html/default.asp

Cycle Pages by Clicking: Next Chapter >>


14

o Bring Your Social Media Login Info [Preview of Next Week] [ URL: http://iris.nyit.edu/~dmyrick/dgim759/embed-social-media.html ]

o Ensure Your Photoshop CC Mock-Up Generated Assets: an images folder [SEE TUTORIAL]: URL: http://iris.nyit.edu/~dmyrick/dgim759/video/Naming-Exporting_MockUp-Images.mp4

SEE HOMEWORK PAGE FOR COMPLETE DETAILS

BRING :: HW-8

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

2 Audio files for web [.ogg, .mp3]

3 Social Media Login Info

4 Ensure Mock-Up Generated Assets into an images folder