Artistic Web Applications - Week3 - Part 1

20
WEEK 2 REVIEW WEEK 3

Transcript of Artistic Web Applications - Week3 - Part 1

Page 1: Artistic Web Applications - Week3 - Part 1

WEEK 2

REVIEW

WEEK 3

Page 2: Artistic Web Applications - Week3 - Part 1

DNS – Domain Name System

• The DNS server follows a series of

steps to turn the human readable web

address into a machine-readable IP

address (69.127.23.407) if not stored in

your cache

IP – Internet Protocol

• An IP address (69.127.23.407) is the

equivalent of your home mailing

address, not so easily to remember

• Web browsers translates the basic

HTML (Hypertext Mark Up Language)

code that allows us to see images, text

videos and listen to audio on websites,

along with hyperlinks that let us travel

to different web pages

WEEK 2 REVIEW

Page 3: Artistic Web Applications - Week3 - Part 1

HTTP: HyperText Transfer Protocol

• A Protocol is a set of instructions, or

commands

• Entering a domain name (URL) in

your web browser sends out a HTTP

command to the web server (ISP)

directing it to fetch and transmit the

requested Web page

URL: Uniform Resource Locator

• A URL is used to identify a network

resource on the Internet

• Network resources are files that can

be web pages, text documents,

graphics, or programs

• A URL is to a web site, as your street

address is to your home

WEEK 2 REVIEW

Page 4: Artistic Web Applications - Week3 - Part 1

RESPONSIVE DESIGN

Page 5: Artistic Web Applications - Week3 - Part 1

WEEK 2 REVIEW

Protocol: The how

• How your browser needs to communicate with the web server when sending or

requesting files

Domain: The where

• The unique reference that identifies a web site on the internet (e.g. google.com)

Path: The what

• A file or directory on a web server

Page 6: Artistic Web Applications - Week3 - Part 1

WHAT IS

HTML?

HTML

Page 7: Artistic Web Applications - Week3 - Part 1

By the end of today’s class I want you to find this tattoo funny…

GOAL FOR TODAY:

Page 8: Artistic Web Applications - Week3 - Part 1

HTML stands for Hypertext Markup Language

• HTML is the publishing language of the World Wide Web

• It’s not a programming language but rather a way of describing something

• It is not complicated

• It is easy to write and very easy to understand

• Most HTML tags are self explanatory as they describe themselves with the tag

they use making them easy to remember and understand

• It is the web browser that interprets the HTML to display the site content

WHAT IS HTML?

Page 9: Artistic Web Applications - Week3 - Part 1

• You do not require any special software to write HTML, it can be done in Text Edit

(Mac) or Notepad (PC)

• In this course we will be using Dreamweaver.

SOFTWARE

Page 10: Artistic Web Applications - Week3 - Part 1

• All HTML code reads like a story, it has a beginning, middle and end

• The story must be complete in order for it to work

TAGS

Page 11: Artistic Web Applications - Week3 - Part 1

• Tags are the parts of any HTML documents

• All tags describe a piece of the website content

• Tags do not appear in the web browser – but you can see them by “viewing the source”

TAGS

Page 12: Artistic Web Applications - Week3 - Part 1

• Open up a web page such as apple.com

• Right click somewhere on the page – around the top left works – and select “view

source”

STEP 1: PLANNING

Page 13: Artistic Web Applications - Week3 - Part 1
Page 14: Artistic Web Applications - Week3 - Part 1

• Look through the code – you’ll see a combinations of “tags” such as:

• <li> … text then </li>

• <div> … text then </div>

• <a …> … text then </a>

STEP 1: PLANNING

Page 15: Artistic Web Applications - Week3 - Part 1

• It is good practice to right all of your HTML code in lower case although it is not

required, for this class all code must be lowercase

• Example: <p>This is a paragraph</p>

TAGS

Page 16: Artistic Web Applications - Week3 - Part 1

• MOST tags require an OPENING and a CLOSING tag

TAGS

Page 17: Artistic Web Applications - Week3 - Part 1

• If you forget to end a tag it effects the whole story

• We need to show when an element such as a heading starts and finishes

• Good: <h1>This is a heading</h1>

• Bad: <h1>This is a heading

<p>This is a paragraph</p>

TAGS

Page 18: Artistic Web Applications - Week3 - Part 1

• Opening tags look like this…

OPENING TAGS

Page 19: Artistic Web Applications - Week3 - Part 1

• Closing tags look like this…

• The closing tags have a forward slash ( / ) before the characters, indicating that the

item being described is finished

CLOSING TAGS

Page 20: Artistic Web Applications - Week3 - Part 1

• Some tags, known as “self closing” or “self terminating” do not require a closing tag

• Example: <img /> <br /> <hr /> (the / at the end recommended)

• An easy way to remember these tags (self closing) is that they are just one thing

• An image is just an image, where as a paragraph is a bunch of words

SELF-CLOSING TAGS