COM414

Dr. Daniel Kelly

Internet Technologies

Logistics

MF116:

Mon 9.15am - 2pm

100% Coursework

Module Targets

Design interactive web-sites
Develop web applications using scripting languages
Implement and create web-sites using industry standard tools

Coursework

1. Group Assignment

2. Individual Assignment

Using HTML and CSS create a website for a "Shopping Center" and "Businesses"

Using HTML and CSS and Javascript create a website to be used as a resource for parents/children in learning LITERACY skills

40% of Module

Teams of 4

Submit by Fri 11th Nov (Week 6)

60% of Module

Individual

Submit by 12th Jan (Week 13)

Coursework 1

1. Group Assignment

40% of Module

Teams of 4

Submit by Thur 28th Oct (Week 6)

Local Businesses Website

>Team of 4:

Build "Virtual Shopping Center" Website [15%]

>Individual Members:

Build individual Business Mini Website [25%]

Using HTML and CSS create a website for a "Shopping Center" website and "Local Businesses" mini-sites

Introduction

Learning Outcomes

Understand basics of how Internet works
Understand what Front-end and back-end Web Development is
Understand what HTML is

HTTP

Request is sent to desired IP address via HTTP
Requested server figures out exactly what we're asking for
Server builds the content
Server responds with combination of:
- HTML
- CSS
- Javascript
- Media (images, videos etc)

View Page Source

Can view HTML, CSS and Javascript on any webpage
In Chrome, right click and select "View Page Source"

Front End Development

HTML

CSS

Javascript

Front End

Things that you see and interact with (in your Browser)

Everything else (is performed on Server)

Back End

HTML

HyperText Markup Language
Defines the structure of a webpage
- Place text here
- Place image here
- Place button here
- etc...
Skeleton or "Nouns" of webpage

CSS

Cascading Style Sheets
Defines the style of HTML
- Make text purple
- Give this image a blue border
- Make all buttons be white with blue border
- etc...
Skin or "Adjectives" of webpage

JavaScript

Defines the behavior of webpage
- Add two numbers together
- Change color when the user clicks
- Load data from external source
Actions or "Verbs" of webpage

Getting Started

Practicalities

Getting Started

Replit: Create Account now
1.1: Join COM414 team
Code Editor: VS Code
Browser: Chrome

Week1/01/HelloWorld

Visual Studio Code

Code Editor
Support for HTML, CSS and JavaScript

Visual Studio Code

Create an empty folder (e.g. Week1)
Open Visual Studio Code
Click "Open Folder"
Choose folder created in step 1 (accept Trust warning)
Create "New File"
Type "myFirstWebpage.html"
Press Enter

Visual Studio Code

<!DOCTYPE html>
<html>
    <head>
        <title>My First Webpage</title>
    </head>
    <body>
        <h1>Wecome to COM414 Internet Techologies</h1>
    </body>
</html>

1. Copy this code:

2. Paste the code in VS Code:

3. Press Ctrl + S to save

Visual Studio Code

4. Test the code

5. Choose Chrome option for debugger

6. Bask in the glory of your amazing web development skills

VS Code

https://code.visualstudio.com/download

Available for FREE:

Workflow

Step 1. Edit your code (e.g. HTML)

Step 2. View result of Edit

Workflow

Step 1. Edit your code (e.g. HTML)

Step 2. View result of Edit

HTML

Basics

Targets

Write simple HTML
Understand what tags are and the difference between closing and self closing tags are
How to write tags with attributes
Use documentation to help build HTML

HTML

First developed in 1989

Used in exchange of scientific and technical documents

Allowed linking of documents via hyperlinks

HTML

The Standard Markup Language for creating web-pages

Describes the structure of a web-page using markup tags

HTML is composed of Elements

Tags are used to represent Elements

HTML

Given some content

Title:
Sample Title goes here
Abstract: This is where the abstract would go. Give a high level overview of paper here
1. Introduction
This is the introduction to the paper. It includes the background of the problem

Title: Sample Title goes here

Abstract: This is where the abstract would go. Give a high level overview of paper here

1. Introduction

This is the introduction to the paper. It includes the background of the problem

HTML applies structure

HTML Tags

<tag> Content here </tag>

Basic Structure

Every HTML document should begin with this boilerplate:

<!DOCTYPE html>
<html>
    <head>
        <!-- Our metadata goes here -->
	<title></title>
    </head>
    <body>

        <!-- Our content goes here -->

    </body>
</html>

<html>: Everything goes within html tags
<head>: Provides general information about the document
<body>: Represents content of document

<!DOCTYPE html>
<html>
    <head>
        <!-- Our metadata goes here -->
	<title></title>
    </head>
    <body>

        <p>Some content here</p>

        <p>More content here</p>

    </body>
</html>

HTML

Head

Body

Title

HTML: A Hierarchy of Elements

Paragraph

HTML Elements

Tags for Structuring and Defining Content

Example:

<h1>
<p>

HTML Tags

<tagName> Content here </tagName>

<h1> Tag

<h1> Big heading here </h1>

Big heading here

<h3> Tag

<h3> Smaller Heading here </h3>

Smaller Heading here

<h3> Smaller Heading here </h3>

Smaller Heading here

<h1> Big heading here </h1>

Big heading here

<p> Tag

<p> Paragraph here... </p>

Paragraph here...

<strong> Tag

<strong>important stuff</strong>

important stuff

Defines important text

<em> Tag

<em>emphasized text</em>

emphasized text

Add emphasis to text

Nested Elements

<p>This is a paragraph with <strong>important</strong> text</p>

This is a paragraph with important text.

Elements can be inside other elements

Nested Elements

<p>This is a paragraph with <strong>important text</strong></p>

Child's ending tag must be closed before parents ending tag

Example:

<strong> is child of <p>
<strong> must close before <p> closes

<p>This is a paragraph with <strong>important text</p></strong>

Comments

<!-- This is a comment -->

Sublime Text Shortcut:

Ctrl + /

Browser will ignore Comments

Mozilla X-Ray Goggles

Follow Steps here: https://x-ray-goggles.mouse.org/
Go to https://www.ulster.ac.uk/
Click on the X-ray google bookmark while on Ulster page
Explore the code behind the page

Week1/02/Tags

Blackboard: Content -> Week1 -> Challenge1

Week1/03/BasicStructureProblem

Block Level vs Inline Elements

<h1>
<h6>
<p>

Example Block Level:

<strong>
<em>

Example Inline:

Week1/04/BlockVinline

<p>This parapgrah includes some <em>important information<em> such as contact info</p>

This paragraph includes some

important information such as contact info

This paragraph includes some

important information

such as contact info

This paragraph includes some important information such as contact info

This paragraph includes some important information

such as contact info

<h1>First Heading Here</h1>

<h2>This section discussed the <em>Main Content</em> of the Page</h2>

<p>This section provides some <h1>additional info</h1> and some references</p>

First Heading Here

This section discusses the Main Content of the Page

This section provides some additional info and some reference

First Heading Here

This section discusses the

Main Content

of the Page

This section provides some

additional info

and some reference

First Heading Here

This section discusses the Main Content of the Page

This section provides some

additional info

and some reference

First Heading Here

This section discusses the Main Content of the Page

This section provides some

additional info and some reference

Lists

Ordered List

Unordered List

<ol>
    <li>Cat</li>
    <li>Bird</li>
    <li>Dog</li>
</ol>

Cat
Bird
Dog

<ul>
    <li>Pink</li>
    <li>Orange</li>
    <li>Red</li>
</ul>

Pink
Orange
Red

Lists

<ol>

<ul>

Lists within Lists

<ol>
    <li>Car
        <ul>
            <li>Ford</li>
            <li>Audi</li>
            <li>BMW</li>
        </ul>
    </li>
    <li>Boat</li>
    <li>Plane</li>
</ol>

Car
- Ford
- Audi
- BMW
Boat
Plane

Lists

Week1/05/lists

Task: Create This Page

Open VS Code
Use the "Week1" folder/project
Create new file called "task1.html"
Implement HTML code to create page on the right
Run/Debug task1.html to open in Chrome
- Tip: DO NOT try to finish the entire task before testing it in Chrome.
- Try one small part, save it and test it

<!DOCTYPE html>
<html>
	<head>
		<title>COM414 My First page</title>
	</head>
	<body>
		<h1>Topics Covered Week 1</h1>
		<h2>Internet Basics</h2>
		<ol>
			<li>HTTP</li>
			<li>IP Adressing</li>
			<li>Servers</li>
		</ol>
		<h2>HTML</h2>
		<ul>
			<li>Hypertext markup langueg</li>
			<li>HTML Tags
				<ul>
					<li>Basic Structure
						<ol>
							<li>Doctype</li>
							<li>HTML</li>
							<li>Head
								<ol>
									<li>Title</li>
								</ol>
							</li>
							<li>Body</li>
						</ol>
					</li>
					<li>Headings</li>
					<li>Paragraph</li>
					<li><em>em</em></li>
					<li><strong>strong</strong></li>
				</ul>
			</li>
		</ul>
	</body>
</html>

<Div>

and

<Span>

Group content into containers

<div> 
   Content 
</div>

<div>

Divide HTML up into sections

<div> 
   My Section 1
</div>
<div> 
   My Section 2
    <div>
      My Section 2.1
    </div>
</div>

<div>

Divide HTML up into sections

<div>

<div>
    <h1>Heading for Paragraph 1</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

<div>

<div>
    <h1>Heading for Paragraph 1</h1>

    <p>Lorem ipsum dolor sit amet, <div>this part is a div</div>, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

Heading for Paragraph 1

Lorem ipsum dolor sit amet,

this part is a div,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, this part is a div, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<span>

<div>
    <h1>Heading for Paragraph 1</h1>

    <p>Lorem ipsum dolor sit amet, <span>this part is a span</span>, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

Heading for Paragraph 1

Lorem ipsum dolor sit amet, this part is a span, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, this part is a div, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<span>

<div>
    <h1>Heading for Paragraph 1</h1>

    <p>Lorem ipsum dolor sit amet, <span>this part is a span</span>, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

Heading for Paragraph 1

Lorem ipsum dolor sit amet, this part is a span, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, this part is a div, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div>

<div>
    <h1>Heading for Paragraph 1</h1>

    <p>Lorem ipsum dolor sit amet, <div>this part is a div</div>, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

Heading for Paragraph 1

Lorem ipsum dolor sit amet,

this part is a div,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, this part is a div, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Week1/06/div

HTML Attributes

Adding additional info to tags

<tag name="value"> ... </tag>

<a href="www.google.com">Click here to go to google</a>

<p class="myclass">Paragraph text goes</p>

<tag> ... </tag>

Images

<img src="dog.jpg">

Week1/07/simpleImage

Links

<a href="url">Link Text</a>

This is the page the link takes you to

This is the text the user clicks on

Opening Tag

Closing Tag

Links

<a href="url">Link Text</a>

<a href="www.google.com">Go to Google</a>

<a href="www.twitter.com">Go to Twitter</a>

Go to Google

Go to Twitter

Week1/08/simpleLink

Types of href

<a href="page2.html">Go to page2</a>

<a href="file:///C:/myfiles/page2.html">Go to page2</a>

<a href="http://www.mywebsite.com/page2.html">Go to page2</a>

Linking to other files on your computer (do not use for public website):

Linking to other pages on same site:

Linking to other sites:

Create page2.html
1. Create <h1> tag and insert "This is page 2"
Create index.html in same directory as page2
1. Create an <a> tag and set href to page2.html.
2. Create some text to be shown for the <a> tag
Open index.html
Click on the link

Linking:

A Simple Site with 2 pages

Week1/09/simpleSite

<!DOCTYPE html>
<html>
<head>
	<title>Page 1</title>
</head>
<body>
 	<a href="page2.html">Click here to go to page 2</a>
</body>
</html>

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Page 2</title>
</head>
<body>
	<h1>this is page 2</h1>
</body>
</html>

page2.html

Linking:

A Simple Site with 2 pages

Logistics

MF116:

Mon 9.15am - 2pm

100% Coursework

Module Targets

Design interactive web-sites

Develop web applications using scripting languages

Implement and create web-sites using industry standard tools

Coursework

1. Group Assignment

2. Individual Assignment

Coursework 1

1. Group Assignment

Introduction

Learning Outcomes

HTTP

View Page Source

Front End Development

Front End

Back End

HTML

CSS

JavaScript

Getting Started

Practicalities

Getting Started

Replit: Create Account now

Code Editor: VS Code

Browser: Chrome

Visual Studio Code

Visual Studio Code

Visual Studio Code

Visual Studio Code

VS Code

Workflow

Workflow

HTML

Basics

Targets

HTML

HTML

HTML

Given some content

HTML applies structure

HTML Tags

Basic Structure

HTML Elements

Tags for Structuring and Defining Content

HTML Tags

<h1> Tag

Big heading here

<h3> Tag

Smaller Heading here

Smaller Heading here

Big heading here

<p> Tag

<strong> Tag

Defines important text

<em> Tag

Add emphasis to text

Nested Elements

Elements can be inside other elements

Nested Elements

Child's ending tag must be closed before parents ending tag

Comments

Block Level vs Inline Elements

Example Block Level:

Example Inline:

First Heading Here

This section discusses the Main Content of the Page

This section provides some additional info and some reference

First Heading Here

This section discusses the

Main Content

of the Page

This section provides some

additional info

and some reference

First Heading Here

This section discusses the Main Content of the Page