Lab#1 - Front End Development

Introduction to Web
Development
HTML, CSS AND JS

Web browser
Tim Berners-Lee imagined a "Web" of interconnected documents.
He wanted authors to be able to connect an idea in one document to
the source of the idea in another, or connect a statement with the
data that backs up that statement, so that in reading one document,
it is easy to access everything related (linked) to it.
This information was navigated by a new tool called a "Browser".

HTML, CSS and JS: The big trio
HTML:
◦ HyperText Markup Language
◦ Contains all the content (words, headings, figures, diagrams, etc.), organized into
a logical structure.
◦ Current version: HTML 5
CSS:
◦ Cascaded Style Sheet
◦ The presentation or style of the page
◦ Current version: CSS 3
JS:
◦ JavaScript
◦ The actions a page can take such as interaction with the user, and customizing
and changing the page according to any number of parameters.

 Check your knowledge
True or False:
◦ The primary purpose of HTML is to format the text.
• False
– HTML is primarily designed to help organize the structure of a document.
CSS is used for formatting and other aspects of design.

The Tools
Simple
• Notepad
• Notepad++
• Vim
• Nano
• emacs
Advanced
• Visual Studio
• Atom
• Vscode
• sublime
Interactive
Tools
• Dream
Weaver
• Microsoft
Expression
Web
• Adobe XD

Marking up
HTML uses angle brackets ("<" and ">") to separate the annotations
from the regular text.
In HTML these annotations are called "tags“.

Demo 1: Hello World
Exercise:
◦ Extract tags and normal text from the document

HTML Element
An HTML document is a set of HTML elements formed in a tree-like
structure (Parent -> child)
An element consists of start tag, end tag and the text inside the tag.
html
head
body
title
heading
paragraph

DEMO 1: Closer look
Start tag
Closing tag
Content Html element
Note:
Most tags have open and close versions, but there are a few strange ones. We refer to the strange ones as "self
closing" tags. (More details later)

Which is the correct nesting of these elements?
1. “p” inside “body” inside “html”
2. “html” inside “body” inside “p”
3. “p” inside “body” inside “head”
1. “p” inside “body” inside “html”

Comments
Comments are a way of adding some text that is primarily targeted
towards human readers.
HTML comment tag

More tags
<h1>, <h2>, … <h6>

<ul>, <ol>, <li>
<hr> or <hr />
 or 
<pre>

A 'ul' element isn't very useful unless it contains what kind of tags?
Answer: <li></li>

Attributes
Attributes are used in tags to further
define the tag.
It is used inside the opening tag it is
applied to and should be added after a
space from the tag name
Syntax:
Attribute name, equal sign, opening
quotes, attribute value, closing quotes

Attributes
A tag can have multiple attributes
The only exception to the name-value pair is if the attribute is a
'boolean attribute'.
◦ you add the attribute name to indicate true and omit it to indicate false

Attributes types
Global attributes: can be applied to all tags
◦ Example: id, class (explained later with css)
Non-global attributes: applied only to some specific tags
◦ Example: start, reversed
Check this link to see all HTML attributes and where they can be applied
◦ https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes

This is me greeting the
world
Which of the following is the correct behavior?
1. Both the classname and paragraph text cannot contain 'world‘
2. Two different classes 'hello' and 'world' will be applied to the paragraph
3. The code is invalid because space is not allowed in class attribute's value
4. One class 'hello world' will be applied to the paragraph
Answer:
2- Two different classes 'hello' and 'world' will be applied to the paragraph

The ‘title’ attribute
It’s a global attribute
Used to show a message that appears when you point your cursor at
something

The <img> tag
src “source”: tells us where to fetch the image from.
alt “alternate text”: provide a short description of what the image is
about.
More attributes: width, height

Hyperlinks
Hyperlink is any text or image you can click and it will take you to
another page. This page can be:
◦ Another Web page.
◦ A bookmark (a specific part of a Web page).
◦ A local link (link to another part of the same Web page)
◦ An email

The <a> tag
The hyperlink tag in html is simply <a> (anchor)
href: points to the URL that the link should jump to.
target: specifies the destination where the linked URL in href should
be opened.
◦ _blank: open in a new window
◦ _self: open in the same window (default)

Is it valid to have a paragraph element inside the <head> tag?
◦ Yes
◦ No
Unlike most attributes, the id of an element should be:
1. split by spaces if you want to specify multiple values
2. the same across a given type of element i.e. all paragraphs have the same id
3. unique to that element and can only be used once
4. written in all caps (“ID=“)

What are the required attributes in an image tag? (choose 2)
1. src
2. title
3. height
4. alt
All browsers support all attributes?
◦ True
◦ False

Which of the following is a valid value following best practice for
the 'id' attribute?
1. 
2. 
3. 
4. 
Which of the following statements about global attributes is true?
1. All global attributes are of type boolean
2. Global attributes are common to all elements
3. Only 'id' and 'class' are global attributes
4. Global attributes only apply to elements that do not have any attributes of
their own

What do you use to split multiple classnames in the 'class'
attributes?
1. You can only specify one classname in the 'class' attribute
2. space
3. comma
4. Colon
Which of the following image paths follow the best practice for a
relative URL?
1. packageassetsImagesexample.PNG
2. images/example.png
3. Package/Assets/Images/Example.png
4. imagesexample.png

The closing tag for image is </img>.
◦ False
◦ True
What does the 'alt' attribute do?
1. used to distinguish image and text links by a screen reader
2. describes the information the image conveys or its function
3. display information about an ambiguous image as a tooltip
4. links to a URL

Cascading style sheet
(CSS)
THE SISTER TECHNOLOGY TO HTML THAT
IS USED TO STYLE YOUR WEB PAGES

Definition
 Cascading Style Sheets (CSS) form the presentation layer of the
user interface.
• Structure (XHTML)
• Behavior (Client-Side Scripting)
• Presentation (CSS)
 Tells the browser agent how the element is to be presented to
the user.

Why CSS?
 CSS removes the presentation attributes from the structure
allowing
• Reusability
• Ease of maintainability
• Interchangeable presentation layer
 HTML was never meant to be a presentation language. Proprietary
vendors have created tags to add presentation to structure. Like
, and .

Using Style Sheets
 External Style Sheet
 Embedded Styles
 Inline Styles

DEMO
TEST ALL THREE WAYS TO CREATE A CSS

Cascading Order
 “Cascading ” reflects the way styles are applied to the
elements in a document, because style declarations cascade
down to elements from many origins.
 Styles will be applied to HTML in the following order:
• Browser default
• External style sheet
• Internal style sheet (in head)
• Inline style
 When styles conflict, the “nearest” (most recently applied)
style wins.

CSS Selectors
 Selectors determine which element the rule applies to
 You can select elements as following:
• All elements of specific type (tag)
• Those that match a specific attribute (id, class)
• Elements may be matched depending on how they are nested in
the document tree (HTML)
 Examples:

Simple Basic Selectors
1. Type Selector
2. IDs
3. Classes
4. Universal Selector

1 Type Selector
 Type selector selects an element of the HTML document: P, H1,
BODY, etc.
 Example

2 ID Selector
 The ID attribute is used to define a unique style for an element.
 Example:
• In the CSS
• In the HTML

3 Classes Selector
 Classes allow you to define a style which can be applied to multiple
elements on your page.
 Example
• In the CSS
• In the HTML
 Both the paragraph & the span elements will be styled by the class “bold".

4 Universal selector
 The universal selector matches any element type.
 Example

CSS Rules Measurement Units
 Physical Measurements
• inches (in)
• points (pt)
 Screen Measurements
• pixels (px)
 Relative Measurements
• %
 Zero can be used with no unit

Styles Categories
 Box Model (Borders, Padding, and Margins)
 Font Styles
 Text Styles
 Text and Background Colors
 Background Images

Box Model
 All HTML elements can be considered as boxes.
 The Box Model allows us to place a border around elements and
space elements in relation to other elements.
 The Box Model consists of:
• Margin: The distance between an element and its parent
• Padding: The distance between the element and its content
• Borders
• Actual content

Box Model
Margin
Border
Padding

CSS Font
 Font-family
 Font style
 Font size
 Font weight

CSS Text
 Color: Set the color of the text
 Text-indent: How much the paragraph start is moved
 Text-align: Horizontal alignment of the text (left- center and right)
 Text-decoration: (underline – overline – line-through)
 Text-transform: Text case (uppercase – lowercase – capitalize)

CSS Background
 Background-color
 Background-image
 Background-position
 Background-repeat

DEMO
CHECK THE REST OF CSS DOCUMENT IN THE SCISSORS
SAMPLE
AND DEMO BROWSER INTERACTIVE TOOLS

CSS Frameworks
 Pre-prepared software framework that are meant to allow for easier,
more standards compliant web design using the CSS.
 CSS frameworks offer different modules and tools:
• Grid especially for responsive web design
• Web typography
• Set of icons in sprites or icon fonts
• Styling for tooltips, buttons, elements of forms
• Parts of graphical user interfaces like accordion, tabs, or slideshow
• Minified css and js files

Bootstrap
Bootstrap is a free front-end framework for faster and easier web
development.
Bootstrap includes HTML and CSS
based design templates for
typography, forms, buttons,
tables, navigation, modals, image
carousels and many other, as well
as optional JavaScript plugins
Bootstrap also gives you the ability to easily create responsive designs

Assignment
Complete this course (2.5 hrs)
◦ https://www.udemy.com/crash-course-html-and-css/
◦ Due date: 30-9-2017 (2 marks)
◦ Last chance: 7-10-2017 (1 mark)
Implement the following page
◦ Create a website for a Landmark
◦ The website should have at least five pages:
◦ Home
◦ History
◦ News
◦ Booking
◦ Contact Us
◦ All pages should have a menu bar that allows you to move between them.
◦ All the pages should have the same theme
◦ Create a single css file for all pages
◦ Due date: 30-9-2017 (2 marks)
◦ Last chance: 7-10-2017 (1 mark)

Make sure you know their meaning
 html
 head
 body
 h1, …, h6
 P
 hr
 br
 a
 img
 ul, li
 ol, li
 table, tr, td
rowspan, colspan
 div
 span

Learning Front End Development
https://www.edx.org/microsoft-professional-program-front-end-
development

Lab#1 - Front End Development

Related slideshows

More Related Content

Lab#1 - Front End Development

Editor's Notes