Web design for beginners

 The fundamentals of the internet and World Wide Web (WWW)

 The Internet is a huge network that connects to computers and other smart device around the
world. Because of this massive network, connected computers are able to share and send informa-
tion with each other users.

 How was the internet build?

A collection of Physical network devices and software layers together can help build the internet
Physical network: consists of routers media, repeaters,
Software layers: such as Web browser

 World Wide Web is an information system that uses the internet to present the set of documents
which are interconnected with hyperlinks (website)
 The Internet is so much bigger than the World Wide Web (WWW)
 The Internet provides infrastructures supporting World Wide Web
 The WWW is only part of the internet (‘a subset’)
 Examples: The websites/application such as google.com

World wide web and the internet are two different things. The WWW is a subset, which means a part of
something bigger, of the internet

 Deep drive into understanding how the internet work

 The structure of Web addresses:
https:// google .com
internet protocol sub-domain domain name
 Domain is the location and also the name of the website. The domain name could end with
.com, .org, .uk, .gov
 Sub-domain is the extension for domain. For example, a website can have multiple sub-domain
such as https://photos.example.org

 Internet protocol is the set of rules that control the data communication over the internet. It is iden-
tified that the internet is built with physical devices and software together. The internet protocol is
part of the software supporting to the function of the internet.
Examples:
 FTP (File Transfer Protocol): Useful for handling large files over a network
 HTTP (Hypertext Transfer Protocol): Websites heavily use this protocol to share text and multi-
media over the internet
 HTTPS (Hypertext Transfer Protocol Secured): Same as HTTP, but more secured
 What happens when you type a website address on your browser and hit enter
 Request

Response

The frontend, also known as the client side is the part where we always see in our browser. Or simply
the websites look and feel. In web-development, it is important to design the frontend part, which is the
section the course is focusing

The website that we access on the internet are stored outside of our computer but on web server some-
where else. These servers store all the data of the website that we accessed. So, when we type the web-
site address, there is a request going to the server, which holds the data. Then the server processes the
request and sends back the relevant data to the frontend as a ‘response’. This is the basic client-server
architecture on the web.

 How does the internet know the specific server related to the website address you enter?There are
millions of servers out there, but the internet delivers only the content related to your specified web
address.

First, you open your browser and type a website address, or even google search and click on the search
result. Both are the same. Web addresses are in letters, but internet devices like routers, switches these
letters to numbers. When you send a website address, it should be translated into an IP address. This
operation is done by domain name servers or DNS.
After resolving the IP address of a Web URL, now it is straightforward to identify the relevant server
which holds the website data. So, a connection will be routed to that particular server. Then the content
will be downloaded to the client device.
 Introduction of web programming and cloud computing
 What is web programming
 We need the Front end/client side with the user interface that most users are dealing with.
In order to have a very good front end, we need a kind of service side programmed a back
end to facilitate its services and storing files.
 When it comes to web programming, you’ll need to code software and design programs in
both front end and back end. Simply we can identify both front end and back end as two
separate entities and you need to propose or you need right code so that you can design
full-stack web applications.

 Client-side programming simply means you are designing front end applications, the design of the
website, the look and feel maybe you'll be adding such as website buttons, website input fields,
beautiful colors, pictures, movies multimedia elements.
There are three languages and they are HTML, CSS, JS

 Cloud computing is the on-demand delivery of IT resources and services over the internet with pay-
as-long-as-you-go pricing
There are multiple types of cloud computing services,
 Software as a Service (SaaS)
 Platform as a Service (PaaS)
 Infrastructure as a Service (IaaS)
 Software as a service (SaaS)
SaaS applications are delivering the services of the software through the Internet simple as they are
delivering the services of different software through the Internet. For example, if you take Google
Maps, Google Maps is a cloud-based service. It said that the software is map software allows differ-
ent maps routing navigation there are lots of features this is software. You don't need to install this
software Google Maps on your computer. You just need the Internet, so you connect to the Inter-
net, and you connect to this website Google Maps. Then you can enjoy Google Maps features.
 SaaS is also known as “on-demand software”
 It is a software in which applications are hosted by a cloud service provider
 Used can access this application through the internet
 Platform as a service (PaaS)
This is mostly for developers. As developers, programmers, you can enjoy different web applications
those are providing Infrastructure and services through the cloud. In other words, PaaS cloud com-
puting platform is created for the developers to develop, test, run and manage the applications

 Infrastructure as a service (IaaS)

This computing service that focuses on the servers and storages which is managed over the internet.
One of the best examples is the digital ocean. Digital ocean provides you to set up virtual services
 you are not maintaining a physical server. You can set up a virtual server, and you can log in to that
server, and you can put all the website content there, and you can host a web application there. It's
a very interesting approach to infrastructure as a service. You can enjoy through the cloud if you're
using an Infrastructure as a service kind of application.

 Introduction of HTML
 What is Website
A collection of interrelated documents that can be seen with a web browser

 Frontend technologies
 HTML – defines the structure of a website. It can be used to add building blocks to the lay-
out.
 CSS – defines the presentation of a website. These include visual effects and make the web-
page more attractive
 JAVA SCRIPT – defines that functionality of a website

HTML + CSS Only HTML

 The Introduction to HTML

Some of these elements are mandatory while others are optional. But we can always find the
following three elements on every page in addition to the DOC Type declaration at the top.
 1. <!DOCTYPE> declaration
<!DOCTYPE> informs the browsers that it is actually an HTML 5 document.

2. Opening and Closing <html></html> tags

The DOCType Declaration is followed by <html></html> opening and closing tags. These tags
contain everything inside the document, including the Head and Body

3. Opening and Closing <head> </head> tags

<head> </head> opening and closing tags, follow the opening Html tag. These tags contain infor-
mation about the body, title of the page, definitions, labels, etc. You can only use certain
markup elements in the HTML 5 head. Some of these elements include style, title, base, link,
script, and meta. In HTML 5, these elements are collectively known as HTML Head Elements.

4. Opening and Closing <body> </body> tags

After the closing head tag is the <body> </body> opening and closing body tags. They contain all
the content which appears on the browser.
You can try out the following example to create your first web page. Here you can edit the code
and see the output in the result pane.

<h1> Title or heading inside the body of the website

<p> Paragraph inside the body of the website
<title> the website label
<head> It contains information such as the page <title>
<Body> The <body> tag defines the document's body

 Heading, Header & Footer Tag

 A comparison of how adding a heading can help organize the workflow of the website

 What are HTML headings

HTML heading are the title and subtitle you want to display in your website. They are defined
with <h1> to <h6>
<h1> = High Importance
<h6> = Least Importance

 What is the header tag

Header tag is used for the container of the webpage where it says what the website is about and
its website branding. Inorder to use it we have to type the tag name “<header>

 What is the footer tag

The footer tag is the footer which is at the bottom of the webpage or at any other specific sec-
 tion of the webpage. <footer>

 Text Formating
 Bold: <b></b>
 Italics: <i></i>
 Entering into the other line of the paragraph (kinda like the enter button when typing in a word
document: <br>
 Superscript (ex: 2nd ): 
 Subscript (ex: CH4): 
 Turning text small: <small></small>

 Lists in HTML
 There are three types of list
 Unordered list
 Ordered list
 Description list

 Unordered list: is a list that organized related items without a specific order. It is denotated us-
ing the <ul> tag. Inorder to add the list, we type the tag <li>
  Ordered list: is a list that is organized related items with a specific order. It is denotated using
the <ol> tag. Inorder to add each list, we type the <li>

Description list: is a list that contains a description for each list. It is denotated using the <dl>. In-
order to add each list, we type the <dt> and to add each description, we type <dd>

 Images in HTML
 How to add an image
It can be added using the <img>. We type out <img src=”image.file” alt:image>
 Src is a tool used to locate the location of the file.
 Alt is the applied name of the image incase the image is doesnt show up in the website
The Image can also be resized using width and height

 Videos in HTML

 Audios in HTML

 Tables in HTML
 Just like Headings, Tables can be used to help us organize data that is too detailed or compli-
cated to be describe using text

 The following code:

 <table>: used to create a form of table
 <tr>: it is used to create a row of table
 <th>: It is used to create a heading of a one column of the table
 <tb>: It is used to implement the data in each column of the table
  How to create a table in HTML
 Step one: We start by implementing the <table> tag
 Step two: We have to create a table row tag <tr> for each section of the table which is the head-
ing and the data
 Step three: To create a heading we implement the <th> for each heading of the row
 Step four: In order to implement each data of a row we implement the <td> tag for each data

 HTML Forum

A HTML form is used to collect user input. It is a section of a document which

contains controls such as text fields, password fields, checkboxes, radio but-
tons, submit button, menus etc.

 <input type=”text”>
<label for=”fname”>First name</label>
<input type=”text” id=”fname”>

 <input type=”ratio”>
<label for=”gender”>Gender</label>
<input type=”ratio” id=”male”>
<label for=”male”>Male</label>
<input type=”ratio” id=”female”>
<label for=”female”>Female</label>

 <input type=”Checkbox”>
<label for=”choice”>Select your choice</label><br>
<label for=”online”>Online Lectures</label>
<input type=”checkbox” id=”online”>
<label for=”physical”>Physical Lectures</label>
<input type=”phy” id=”online”>

 <input type=”Submit”>
<input type=”button” value=”submit”>

 HTML Content Model

 What is Content Model
Content Model is a set of rules that define which type of content an element is allowed to have.

 HTML Content Model

Every HTML element has a default display value, depending on what type of content the ele-
ment is. There are two display values: block and inline.

Block elements: is when the browser automatically adds a line break before or after a block ele-
ment, which takes up available width. They are also known to be the largest builiding block in a
website
 Inline elements: is when you write a set of code in the same line without having to move into
another line. The width of the inline element is equal to the amount of content. They are also
known to be the smallest building block in a website

 Modern HTML Content Models Ctd.

 Metadata content
 Flow content
 Sectioning content
 Heading content
 Phrasing content
 Embedded content
 Interactive content
 HTML Content Model

Hyperlinks are defined using the <a> tag. The <a> tag has two attributes. The first attribute of the <a>
tag is the href attribute, which indicates the link's destination. The second attribute is the link text. It’s
the part that will be visible to the user of the website. By clicking on the link text, the user will be sent to
the specified URL address.
 Introduction of CSS
 What is CSS
CSS stands for Cascading Style Sheets. It describes how HTML elements are to be displayed on
screen, paper, or in other media. It is mainly used to control the style of a web document.

The CSS Style rule is made up of 3 parts

Selector: HTML element at which a style will be applied

Property: A property is a type of attribute of HTML tag
Value: Values are assigned to properties

 There are three ways of inserting a style sheet

 External CSS
 Internal CSS
 Inline CSS

 External CSS
An external style sheet can be written in any text editor, and must be saved with a .css extention
The external .css file should not contain any HTML tags
HTML

CSS

[Inorder to link css to html. We use <link rel=”stylesheet” href=”styles.css”> ]

 Internal CSS and Inline CSS

This is where CSS code can be written in the HTML file
Inorder to colour background
<style> background-colour:”brown” </style>’

Inorder to colour text

<p style=”colour:white”>hello </p>

 Style Precedence
Style precedence is as follows and where number one has the highest priority
 Inline style (Inside the HTML element)
 Internal and External style (In head section)
 Browser default

 Basic Properties of CSS

 What is a property in CSS?
CSS Property is used to style the HTML elements. Each HTML element can be styled using differ-
ent CSS properties. They include:
 Color
 Size
 Border
 Text

A CSS property consists of a property name and a property value. To specify more than one CSS
property each pair is separated by a semicolon (;)

 Text properties
These are the properties that are used to change the text using CSS properties
They are discussed,
 Font Family: allows to change the type of font
 Font Size: allows to change the size of the font
 Font Weight: allows to change the thickness of the font

 Color properties
These are the properties used to change colors using CSS properties. They include:
Color: allows to specify the color of the text
Background-color: allows to change the background color for the element.

 Spacing Properties
Helps us see how we can change the spacing using CSS properties. They consist of:
 Padding
 Margin
 Border
 CSS Background Styling
 CSS background property is used to define the background effects on HTML elements
CSS background properties:
 Background-color
 Background-image
 Background-repeat
 Background-attachment
 Background-position

 CSS background-color
It is used to specify the background color of the element
Colors can be specified by,
 Valid color name - eg:’blue’
 HEX value - eq:#00ff00
 RGB value - eg: rgb(255, 0, 0)

 CSS background-image
Used to set an image as a background of an element
 CSS background-repeat
It is used to repeat the image in both horizontally and vertically and it can control the repeating
property
CSS background-attachment
Specifes whether the background should be scroll or fixed