Lesson 1

  • Introduction to web design
  • The Internet
  • HTTP
  • Browsers
  • What is a web page/website?
  • URL
  • IP Addresses & Domain Names
  • HTML & Tags
  • Naming Conventions
  • Basic Structure & HTML coding

Requirements

  • Software
  • Text Editor – Notepad++
  • Web authoring software – Dreamweaver
  • Browser – Firefox, Google Chrome, Microsoft Edge, Internet Explorer, Safari
  • Graphics Editing Program – Photoshop, Gimp, Canva
  • Hardware
  • Computer with internet connection
  • Multimedia content – digital camera, scanner, microphone and speakers

The Internet

  • Collection of millions of computers around the world.
  • All computers are connected to each other and use rules to pass data.
  • These rules are called protocols.
    • For example HTTP – HyperText Transfer Protocol.
    • HTTP is the protocol used to exchange or transfer data on the internet.
  • Servers are computers that store webpages and deliver them to client computers when requested.
  • Client computers are individual computers which request information from the servers.

HTTP

  • HTTP is short for hypertext transfer protocol.
  • HTTP is the protocol (or rule) that is used to format and transfer messages, and what actions web servers and browsers should take in response to various commands.
    • For example, when you enter a URL into your browser, an HTTP command is sent to web server directing it to fetch and transmit the requested web page.
  • HTTP status codes or error messages are response codes given by web servers that help identify the cause of error.  
    • For example  “404 File Not Found” is a common HTTP status code. It means the web server cannot find the file you requested. It may have been moved or deleted, or you entered the wrong URL or document name.

Browser

  • Software which displays the webpages on screen.
    • Examples – Internet Explorer, FireFox, Google Chrome, Safari.
  • Different browsers have different settings which can display webpages differently.
  • All webpages should be tested in all browsers before going live.

What is a Web Page/Website?

  • A web page is a single document in a website on the Internet.
  • A collection of related web pages is called a website.
  • Navigating the web
    • Links – these are text or images on a webpage, when clicked will bring the user to a different location.
    • URL – Uniform resource locator is an address on the web.  

Uniform Resource Locator (URL)

  • A URL is made up of several parts.
  • For example http://www.designbysimon.com/blog/wp-content/uploads/2019/01/Web-Design-Level-4-2019-Lesson-one-1.pdf
    • http protocol – when you enter this URL into your browser a HTTP command is sent to web server directing it to fetch and transmit this web page.
    • www is the sub domain of the designbysimon domain.
    • designbysimon is the domain name.
    • .com is the top level domain (TLD) –  a TLD identifies the most general part of the domain name in an Internet address.
    • uploads/2019/01 is a folder (this folder stores all the recipes contained on the site)
    • Web-Design-Level-4-2019-Lesson-one-1.pdf is a file name with an extension – this is the file that will be displayed when the above address is entered into a browser.

Uniform Resource Locator Components

uniform resource locator sections

IP Addresses & Domain Names

  • Server computers on the Internet are able to communicate with one another because each one has a unique code number called an IP (internet protocol) address. 
  • Each IP address is made up of a series of numbers separated by full stops.  
    • A typical example would be: 128.92.32.187
  • Because people have difficulty remembering long stings of numbers we use domain names instead.
  • A domain name is a unique word that acts like a nickname for the IP address.  A typical one would be www.rte.ie.

IP Addresses & Domain Names

  • The Domain Name System (DNS) takes care of this cross-referencing for us.  
  • DNS is a large database that holds all the IP addresses and corresponding domain name of all servers connected to the Internet.  
  • When you specify the address of a server, using its domain name, a process called domain name resolution takes place to find the server computer.
  • Domain name resolution takes place on the Internet on special computers known as domain name servers. 

HTML & Tags

  • HTML – HyperText Markup Language.
  • HTML is the language used to write webpages.
  • HTML marks up text.
    • To mark up means to insert special code called tags into the text.
    • These tags control how the text appears on a webpage.
    • The function of HTML is to tell web browsers how to display web pages.
  • Tags are the code that make up HTML.
    All tags have an opening and a closing tag (there are a few exceptions).
    Example <p>      </p>
    All tags are surrounded by angle brackets<>.
    All closing tags have a / in them.

Naming Conventions

  • All web pages will have a .html extension
  • The first page of any web site must always be named index.html.  
  • This page is always the home page of any web site.
  • Always use lower case when naming .html pages.
  • Do not have any spaces when naming .html pages
    • Example aboutus.html
  • Apart from index.html all other pages should be named with meaning.
    • Example contactus.html

Basic Structure of a HTML File

<!DOCTYPE html>
<html>
<head><title></title></head>
<body>

			
</body>
</html>

Exercise One – First webpage

  • Create a folder called exerciseone. 
  • Open up Notepad++ and type this code:
<!DOCTYPE html> 
<html>
<head>
<title>My First Web Page</title>
</head>
<body> 
I have just created my first web page	
</body>
</html>
  • Save as index.html in your exerciseone folder.
  • Open up your exerciseone folder and click on the internet browser icon.

Exercise Two – Headings

  • Create a folder called exercisetwo.
  • Open up Notepad++ and type this code:
<!DOCTYPE html>
<html>
<head><title>Headings</title>
</head>
<body>
<h1> This is headline H1 Largest</h1>
<h2> This is headline H2 Large</h2>
<h3> This is headline H3 Big</h3>
<h4> This is headline H4 Smaller</h4>
<h5> This is headline H5 Small</h5>
<h6> This is headline H6 Smallest</h6>
</body>
</html>
  • Save as headings.html in your exercisetwo folder.
  • Open up your exercisetwo folder and click on the internet browser icon.

Exercise Three – Bold and Italics

  • Create a folder called exercisethree.
  • Open up Notepad++ and type this code:
<!DOCTYPE html>
<html>
<head><title>Bold and Italics</title>
</head>
<body>
<strong> This is in bold</strong>
<em> This is in italics</em>
<strong><em> This is in bold and italics</em></strong>
</body>
</html>
  • Save as bolditalics.html in your exercisethree folder
  • Open up your exercisethree folder and click on the internet browser icon.

Exercise Four – Paragraphs

  • Create a folder called exercisefour.
  • Open up notepad and using the HTML tags you have learned so far, create a page with this content:

Web Design: Friday 1:00-4:30pm  

Duration: 22 Weeks

Commencement Date: Friday 11th October 2019

This course introduces participants to a range of web design concepts through the use of HTML and Adobe Dreamweaver. Participants will learn how to build web pages containing text, images, links, rollovers, hotspots, suitable navigation solutions and forms. The course will also cover the important area of web publishing and will facilitate people interested in designing their own websites.

Software:

Text Editor – Notepad, Web authoring software – Dreamweaver, Browser – Firefox, Google Chrome, Microsoft Edge, Internet Explorer, Safari, Graphics Editing Program – Photoshop, Gimp, Canva.

  • Save as index.html in your exercisefour folder.
  • Open up your exercisefour folder and click on the internet browser icon.

Lesson One Tag Table

NameOpening TagClosing TagDescription
Document Type<!DOCTYPE html>
Informs the Browser to render the
code as an HTML document.
HTML<html></html>These tags enclose the entire HTML
document.  These tags should always
appear first and last on all pages that
you create.
Head<head></head>These tags enclose information about
the page and its title.  No actual page
content goes between these tags.
Title<title></title>These tags always appear between
the HEAD tags.  The TITLE tags enclose
the title for the webpage.
Body<body></body>The BODY tag contains all of the
page content.
Line break<br />
This tag creates a line break.  It has
no closing tag.
Paragraph<p></p>These tags create a paragraph
and then leaves a blank line
after the previous paragraph.
Headline <h1>to<h6></h1>to</h6>These tags set the headline size.   
<H1> is the largest <h6> smallest.
Stong <strong></strong>These tags are used to embolden
the text that it surrounds.
Emphasis<em></em>These tags are used to italicise the
text that it surrounds.

Recap

  • Introduction to web design
  • The Internet
  • HTTP
  • Browsers
  • What is a web page/website?
  • URL
  • IP Addresses & Domain Names
  • HTML & Tags
  • Naming Conventions
  • Basic Structure & HTML coding

h

html


<!DOCTYPE html>
<html>
<head><title></title></head>
<body>		
</body>
</html>

h

html


<!DOCTYPE html> 
<html>
<head>
<title>My First Web Page</title>
</head>
<body> 
I have just created my first web page	
</body>
</html>

h

html


<!DOCTYPE html>
<html>
<head><title>Headings</title>
</head>
<body>
<h1> This is headline H1 Largest</h1>
<h2> This is headline H2 Large</h2>
<h3> This is headline H3 Big</h3>
<h4> This is headline H4 Smaller</h4>
<h5> This is headline H5 Small</h5>
<h6> This is headline H6 Smallest</h6>
</body>
</html>

h

html


<!DOCTYPE html>
<html>
<head><title>Bold and Italics</title>
</head>
<body>
<strong> This is in bold</strong>
<em> This is in italics</em>
<strong><em> This is in bold and italics</em></strong>
</body>
</html>