SlideShare a Scribd company logo

Artistic Web Applications - Week3 - Part 1

•Download as PPTX, PDF•
•
Katherine McCurdy-Lapierre, R.G.D.
Katherine McCurdy-Lapierre, R.G.D.

This document provides an overview and review of topics covered in Week 2, including DNS, IP addresses, HTTP, URLs, responsive design, protocols, domains, and paths. It then introduces HTML, explaining that HTML is the publishing language of the web, uses tags to structure content, and can be written in any basic text editor. It provides examples of common HTML tags and explains the differences between opening, closing, and self-closing tags.

Related slideshows

Web development basics
Web development basicsWeb development basics
Web development basics
 
BASICS OF HTML
BASICS OF HTMLBASICS OF HTML
BASICS OF HTML
 
Lesson 2: Getting To Know HTML
Lesson 2: Getting To Know HTMLLesson 2: Getting To Know HTML
Lesson 2: Getting To Know HTML
 
1 of 20
WEEK 3 WEEK 2 REVIEW
WEEK 2 REVIEW 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 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
RESPONSIVE DESIGN
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
HTML WHAT IS HTML?
GOAL FOR TODAY: By the end of today’s class I want you to find this tattoo funny…
WHAT IS HTML? 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
SOFTWARE • 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.
TAGS • 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 • 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”
STEP 1: PLANNING • Open up a web page such as apple.com • Right click somewhere on the page – around the top left works – and select “view source”
Artistic Web Applications - Week3 - Part 1
STEP 1: PLANNING • 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>
TAGS • 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 • MOST tags require an OPENING and a CLOSING tag
TAGS • 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>
OPENING TAGS • Opening tags look like this…
CLOSING TAGS • Closing tags look like this… • The closing tags have a forward slash ( / ) before the characters, indicating that the item being described is finished
SELF-CLOSING TAGS • 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

More Related Content

Artistic Web Applications - Week3 - Part 1

  • 1. WEEK 3 WEEK 2 REVIEW
  • 2. WEEK 2 REVIEW 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
  • 3. WEEK 2 REVIEW 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
  • 5. 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
  • 6. HTML WHAT IS HTML?
  • 7. GOAL FOR TODAY: By the end of today’s class I want you to find this tattoo funny…
  • 8. WHAT IS HTML? 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
  • 9. SOFTWARE • 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.
  • 10. TAGS • 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
  • 11. TAGS • 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”
  • 12. STEP 1: PLANNING • Open up a web page such as apple.com • Right click somewhere on the page – around the top left works – and select “view source”
  • 14. STEP 1: PLANNING • 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>
  • 15. TAGS • 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>
  • 16. TAGS • MOST tags require an OPENING and a CLOSING tag
  • 17. TAGS • 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>
  • 18. OPENING TAGS • Opening tags look like this…
  • 19. CLOSING TAGS • Closing tags look like this… • The closing tags have a forward slash ( / ) before the characters, indicating that the item being described is finished
  • 20. SELF-CLOSING TAGS • 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

Editor's Notes

  1. The sitemap will often change several times over the course of a site design Often user testing will show opportunities to make improvements – eg. changing the name of a section to make it clearer to the user Software exists to make this process easier and look more professional, eg: http://www.gliffy.com/uses/web-site-map-software/
  2. There are many ways to generate the behind the scenes code Often it’s a combination of starting with an existing template and adapting it to customize it to the look and feel of the site Or, it could be created from scratch using a WYSIWYG editor such as Dreamweaver
  3. There are many ways to generate the behind the scenes code Often it’s a combination of starting with an existing template and adapting it to customize it to the look and feel of the site Or, it could be created from scratch using a WYSIWYG editor such as Dreamweaver
  4. Usually this is done in Illustrator, Photoshop or other professional design software Design is done to scale so that it will accurately demonstrate how the site will look in a browser With move to responsive design, may also show how the site will look on a mobile device/phone and/or a tablet
  5. Popular CMSs include open source software such as: Drupal, Wordpress, Joomla Open source means that the software is free and available to anyone Other option is to purchase software from a company. This involves paying upfront for the software and often includes an annual licensing fee.