Class Notes for Monday 2/4/19 & Wednesday 2/6/19
- Web terminology
- HTML Tags & attributes (open/close)Content (Structure, nesting)
- Basic HTML structure & head elements
- all lowercase, no spaces or special characters/numbers
- Project folder structure (file management)
- Style (Design, Look, CSS)
- CSS Syntax
- Dreamweaver Interface & Workspace
- DW: View Options: Code, Live, Design
- Overview: document window, objects palette, property inspector, etc.
- Insert Panel
- Inserting images
- Properties Inspector
- Previewing in a Browser
- Dreamweaver Preferences recommendations, code size, shortcuts, etc.
- Site Definition (index.html)
- Link basics, Relative & Absolute links, Linking HTML pages
- Line breaks vs. paragraph breaks
Download the Class Presentation PDF
- Cascading Style Sheets - used to define the design of a web site.
- Domain Name Server - converts IP addresses into domain names. When someone types a domain name into a web browser, the DNS translates the domain name to the IP address and points the browser to the correct web server.
- domain name
- The name that identifies a computer or computers on the Internet. These names appear as a part of a Website’s URL. It allows people to enter the easier-to-remember domain name, instead of having to remember the IP address. For example, apple.com is the domain name in the URL http://www.apple.com.
Domain extensions include (there are many, many more):
- Commercial (for-profit) websites
- Network-related domains (Internet service providers, Web-hosting companies, etc.)
- Non-profit organizations
- Educational institutions in the US
- US government entities
- US military use
- small business Web sites
- signifies a resource web site
- File Transfer Protocol - FTP allows you to copy or send files from one computer to another via the Internet.
- HyperText Markup Language - markup language for describing web documents (web pages).
- Hypertext Transfer Protocol - a standard method used to transfer information on the internet.
- ip address
- Internet Protocol - refers to the actual number that a web address name translates to. The IP number is the real address, which is a unique string of numbers separated by periods that identifies each computer. For example: 172.18.254.1.
- Internet Service Provider - it’s the company that provides you with access to the Internet.
- Search Engine Optimization - refers to the practice of tweaking website coding and content to achieve the highest possible ranking in search engine result.
- Uniform Resource Locator - used to specify addresses to pages or elements on the World Wide Web, for example: http://www.adobe.com or an extended version to get to the Dreamweaverapplication would be: https://www.adobe.com/products/dreamweaver.html.
Basic HTML structure & tags
- HyperText Markup Language, represents the root of an HTML document - defines the whole document
- Represents a collection of metadata for the document - this is the information in a web page people do not see
- Represents the document’s title or name
- Allows authors to embed style (design) information in their documents
- Represents the content of the document - this is the information in a web page people see
- Represents headings for sections. These tags have a rank given by the number in their name. Think of these as a way to break up your outline - heading tags are like you indents. The <h1> tag has the highest rank, <h2> the second highest, <h3>, the third highest and so on. Two tags with the same name have equal rank. Only ever have a single <h1> tag on your page
- Represents a paragraph
Represents a link
- hypertext reference
Specifies a link’s destination. The specific link address is indicated in the href attribute, for example:href="http://www.example.com"
- Inserts a single line break. It is an empty tag which means that it has no closing tag img represents an image
- Defines a division or section
- Used for grouping and applying styles to inline elements.
The span tag is like the div tag - it has no meaning at all and is mostly used for styling by using a class. The difference between the two is that a div is a block element, it is on a separate line (normal document flow) while the span is an inline element, meaning that it can be on a line with other elements - it surrounds what is to be changed
Root folder setup
Basic site structure is important for organizing file. Follow the model below to have a clean, organized site structure:
- css folder
- Stores all external CSS files
- images folder
- Stores all images used in the site
- js folder
- index.html file
- Webpages sit in the "root" of your site folder. The index.html page is always your default/home page
Adding a site to Dreamweaver
Add a new site to Dreamweaver by selecting the SITE menu, then NEW SITE (Click the folder icon next to "Local site folder" and navigate to the folkder you just made):
This will now set up your Dreamweaver Site palette with your files for easy access
- defines a link
- defines the link address
- defines where toped the linked document
Absolute links are referenced with a fully qualified URL and are typically on a site different than the referrer site. Also called “External” links. Typically use target=“_blank”.
Relative links are referenced in relation to the document itself. Also called “local” links. Rarely use target=“_blank”
Link target attribute
- Opens the linked document in a new window or tab. Useful to keep users from permanently leaving your page
- Opens the linked document in the same window/tab as it was clicked (this is default)
- Opens the linked document in the parent frame. Useful for when you’ve created a new window with a link (_blank) and want to target the referrer page.
- Opens the linked document in the full body of the window. Useful when used with frame sets (don't use framesets)
<a href=""/index.html">Will go to the root</a>
<a href=""../index.thml">will go 1 directory up</a>
<a href=""../../index.thml">will go 2 directories up</a>
Paragraph and Line breaks
- The <p> tag defines a paragraph. Browsers automatically add some space (margin) before and after each <p> element (which we typically remove with our CSS Reset).
- The <br> tag inserts a single line break.
- The <br> tag is an empty tag which means that it has no end tag.
Bold and Italic
- Use the <strong> to wrap text you want to bold
- Use the <em> to surround text you want to emphasis