:: DIGITAL IMAGING FUNDAMENTALS :: CLASS NOTES
CLASS:: 08
2017
3 Hours
AGENDA
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
:: 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. <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: [ mybrain]
:: 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)
2. The audio, & videofolder.[CREATE]
3. The code_snippets folderis where you will save and grab code (shortcuts) for your web projects.[CREATE]
4. The images folder is where ALL of your image assets from your mock-up will be saved.
[DUPLICATE FROM PSD ASSETS FOLDER(s)]
5. The remaining files are .htmland .css:
a. The index 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:
- Coding & Uploading (other text editors may offer authoring only)
- Code Hints: Dreamweaver assigns colors to elements. This allows you to quickly analyze elements and discovers errors quicker.
- WYSIWYG (“What You See is What You Get) Editor – (i.e. pick font colors, styles, hyperlink, etc.)
- Built-in functions for creating menus, templates, and fluid layouts for responsive design.
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 > FileNew
b. Select New Document (if needed)
c. Document Type: </>HTML
c. Framework: 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:
:: Basic Webpage Structure
REQUIRED ELEMENT TAGS TO RENDER AN HTML WEBPAGE:
:: Elements & Attributes
ELEMENTS (Source: w3schools):
- HTML Documents are made with HTML Elements
- Most (but not all) HTML Elements are written with a start opening tag, an end </closing> tag, & (in many cases) content in between.
- HTML Elements may contain other HTML Elements
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>
ATTRIBUTES (Source: w3schools):
- HTML Elements can have attributes
- Attributes provide additional information about an element
- Attributes are always specified in the start tag
- Attributes are written with a name & value pair, i.e. name=”value”
- An example of an html element with an attribute appears as follows ::
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
TEXT FORMATTING ELEMENTS
:: Default Element Behavior [ headings, paragraphs, text treatments, lists, etc. ]
Tag (Element Overview):a.Type the following code INSIDE the <body>…</body> tags
<!--start of code-->
<b>This is the tag for the bold text element</b<!--to create a hard return (go to next line) use the break tag <br> -->br
<em>Tag for italic text element</em<!--to create a hard return (go to next line) use the break tag <br> -->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
<!--end of code-->
b. Preview your text in the Browser [File > Preview in Browser > Chrome]
c. Save in code_snippets folderAs…“code_text-formatting.html”
ANCHORS AWAY
:: What is an anchor element? [ Creating Hyperlinks:
- The anchor element is used to hyperlink an element, text, or image to a web location
- The anchor (start and end) tag appears as follows: <a</a>
- The anchor tag requires a hypertext reference attribute and accompanying value
- The hypertext reference attribute and value pair appears as follows: href=”weblocation”
- 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)
Link to a page referencing a URL Address (absolute):(automatically loads the index page at “
(automatically loads the index page inside the “~nyitusername” folder)
(references a file inside the “~nyitusername” folder)
(references a named anchor “#top” on the file.html webpage)
:: Same Page Hyperlinks (reference location on the same page)
- Create back to top hyperlinks after each paragraph referencing“#top”named anchor
2. Save As… > code_snippets > code_same-page-anchor.html
3. Create 3 paragraphs with 777 words using emmet short cut code: First type the short cut, then hit Tab key
NOTE:paragraphs will be long enough to activate a vertical scroll bar in the browser.
p*3>lorem777 [TAB]
4. In order to create a same page anchor, you are required to have:
- 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)
<a id=”top”</a>
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.
<a href=”#top”Top of Page</a>
------EXERCISE------
<a id=”top”</a>
<h1>YOU’VE ARRIVED TO THE TOP</h1>
<p>Use the emmet short cut to create 3 paragraphs of placeholder text. Follow this format…
Other versions of placeholder text may be found online. is basic.
There is also starwars, cupcake, Hipster, Samuel L. Jackson, T.V., and plenty more ipsums…
</p>
<a href=”#top”Top of Page</a>
<p>
This is paragraph two. Ipsum will exist here…
</p>
<a href=”#top”Top of Page</a>
<p>
This is paragraph three. Ipsum will exist here…
</p>
<a href=”#top”Top of Page</a>
:: Relative URL Hyperlinks (files exist in the same website/folder structure)
- Link to another page, located inside the same folder: “file.html”
- Link to another page, located one folder level above current file: “../file.html”
- Link to a another page, located inside a another folder: “folder-name/file.html”
- 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” ) - Link to an image, located in the folder named “images”: “images/artwork.jpg”
- 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”
To Learn Relative Hyperlinks:
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…
<header>URL:
- The header is an HTML5 element
- The header specifies the header of a document or section
- The header typically contains introductory elements (i.e. heading) & link navigation
- In some browsers, the header element appears at the top of the webpage by default
- The nav is an HTML5 element
- The nav specifies a major block of navigational links (your website menu)
- I see you’ve already met…
STEPS FOR CREATING A BASIC NAVIGATION MENU::
1.Open yourindex.html Document
NOTE: This index.html exists inside your code_snippets folder - different from your future public index page.
If you type in , the index.html file inside the code_snippets folder will display. This index file may serve as your landing page for code snippets.
2. HTML CODE[ type the following code ver batim after the opening <body> tag ]:
------EXERCISE------
<header>
<nav>
<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> |
</nav>
</header>
3. 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
4. If all links work, copy the entire header element, then paste the header just below the opening <body> tag
in the following files: code_text-formatting.html, index.html, & code_same-page-anchor.html
5. Test in Browser
HW-8 / Homework
DUE :: 03.29
REVIEW ::
1. Class Notes
2. Folder/File Set-Up
3. Dreamweaver CC Workspace Overview
URL:
[OPTIONAL]: DwCS6 Workspace Overview
URL:
DO ::
- HTML Intro Tutorial[ See Right Column ]
- Convert 1 Original Video (@ 30 seconds or less)
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:
2. URL:
3. URL:
NOTE:
For offline conversions, unlimited file size, you may download the following free software:
1. Handbrake [ web optimized .mp4]:
2. VLC [ all formats ]: - Convert 1 Audio Track into Two Formats
Format One: .mp3
Format Two: .ogg
ONLINE [ URL: OR ] - Bring Your Social Media Login Info [Preview of Next Week]
[ URL:
HTML HOME – HTML Formatting
Cycle Pages by Clicking:
Next Chapter >
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
1