WD MODULE 1 TYPES OF WEBSITES

Introduction to the Internet and Wed Design Internet site - is another term for a website that is
Internet - is a worldwide collection of computers linked generally available to anyone with an Internet connection
together Intranet - is a private network that uses Internet
Node - is any device, such as a computer, tablet, or technologies to share company information among
smartphone, connected to a network employees
Network - is a collection of two or more computers linked Extranet - is a private network that uses Internet
together technologies to share business information with select
Internet of Things - describes the ever-growing number corporate partners or key customers
of devices connecting to a network Electronic commerce (e-commerce) - which is the
Internet backbone - is a collection of high-speed data buying and selling of goods and services on the Internet
lines that connect major computer systems Learning Management System (LMS) - to
Internet Service Provider (ISP) - is a company that has a simplify course management, Educational institutions use.
permanent connection to the Internet backbone Purpose of the website — The purpose of a commercial
World Wide Web business website is related to the goal of selling products
The World Wide Web, also called the web, is the service or services
that provides access to information stored on web servers Target Audience — The people who use the website are
website - is a related collection of webpages created and known as the target audience
maintained by a person, company, educational institution, Multiplatform Display —A responsive design of
or other organization a website must be created that provides an optimal
home page - is the first document users see when they viewing experience across a range of devices
access a website Wireframe - is a simple, visual guide that clearly identifies
hyperlink - commonly called a link, is an element that the location of main webpage elements
connects one webpage to another webpage on the same Active white space - is an area on the page that is
server intentionally left blank
Passive white space - is the space between content
PROTOCOLS areas
Protocol- is a set of rules that defines how a client Site map - is a planning tool that lists or displays all the
workstation can communicate with a server pages on a website and indicates how they are related to
Server - is the host computer that stores resources and each other
files for websites
Hypertext Transfer Protocol (HTTP) - is a set of rules
for exchanging text, graphics, audio, video, and other
multimedia files on the web TYPES OF WEBSITE STRUCTURE
File Transfer Protocol (FTP) - is used to exchange files linear - website structure connects webpages in a straight
from one computer to another over the Internet line
Transmission Control Protocol/Internet Protocol Hierarchical - website connects webpages in a treelike
(TCP/IP) - is a pair of protocols used to transfer data structure
efficiently over the Internet by properly routing it to its Webbed - website structure, pages are linked together in
destination a way that allows users to easily move between them and
Internet Protocol (IP) - ensures data is sent to the explore the site in a non-linear way.
correct location Graphics - add visual appeal to a webpage and enhance
Domain Name System (DNS) - associates an IP address the visitor’s perception of the products and services
with a domain name Navigation - of a website should be clear and concise,
Web browser - is a program that interprets and Each webpage should have a designated navigation area
displays Web pages and enables you to view and interact with links to other pages in the site
with a Web page Typography - (effective use) fonts and font styles,
Uniform Resource Locator (URL) - is the address of enhances the visual appeal of a website
a document or other file accessible on the Internet Colors - contributes to the appeal and legibility of the
Protocol - http website
Sub Domain – www Accessibility - A web designer should create pages for
Domain Name – google viewing by a diverse audience
Top Level Domain (TLD) - .com World Wide Web Consortium (W3C) - develops and
maintains web standards, language specifications, and
accessibility recommendations

Understanding the Basics of HTML

Hypertext Markup Language (HTML) - which is an HTML element is defined by a starting tag. If the element
authoring language used to create documents for the web contains other content, it ends with a closing tag, where
HTML element - consists of everything from the start tag the element name is preceded by a forward slash.
to the end tag HTML BASIC TAGS
</p> - end paragraph tag <h1> - Heading Tags
JavaScript — It is a popular client-side scripting <p> - Paragraph tag
language used to create interactivity within a web browser <br/> - Line Break Tag
jQuery — It is a library of JavaScript programs designed <hr/> - Horizontal Lines
for easy integration onto a webpage <pre> - Preserve Formatting
&nbsp - Nonbreaking Spaces
Understanding the Role of Other Web
Programming Languages HTML Elements and Attributes
PHP (Hypertext Preprocessor) — It is an open-source <!DOCTYPE html> - HTML declaration
server-side scripting language used for common tasks <html lang =”en”> - html star tag
such as writing to or querying a database located on a </html> - html end tag
central server
<head> - head start tag
ASP (Active Server Pages) — is a server-side scripting
</head> - head end tag
technology
<body> - body start tag
</body> - body end tag
Using Web Authoring Tools
<title> - start tag
Webpages can be created using HTML with a simple text
</title> - end tag
editor, such as
<br> for a line break
Notepad, Notepad++, Sublime, Programmer’s
Notepad, TextEdit, and TextWrangler <hr> (row space) horizontal line, or rule
<tag> syntax for empty tags
Text Editors <p> - start paragraph tag
Notepad++ - is a free, open-source text editor. It is used
to create files in several markup, scripting, and Web Browsers - The purpose of a web browser (Chrome,
programming languages, including HTML, CSS, Edge, Firefox, Safari) is to read HTML documents and
JavaScript, PHP, Java, C#, and Visual Basic display them correctly.
Programmer’s Notepad -is a free, open-source text browser - does not display the HTML tags, but uses them
editor used to create webpages, and files in several to determine how to display the document
markup, scripting, and programming languages as well Attribute - is used to define the characteristics of an
Sublime - is a cross-platform text editor HTML element and is placed inside the element's opening
TextWrangler - is a free, open-source text editor. It is tag.
used to create files in many formats, including HTML and HTML style - attribute is used to add styles to an element,
CSS such as color, font, size, and more

WD MODULE 2 HTML FORMATTING TAGS

INTRODUCTION TO HTML <b> - Bold Text
WHAT IS HTML? <i> - Italic text
HTML was created by Timothy Berners-Lee in late 1991 <u> - Underlined Text
HTML stands for Hyper Text Markup Language <strike> - Strike Text
HTML - is the standard markup language for creating <tt> - Monospaced Font
Web pages, describes the structure of a Web page, <sup> - Superscript Text
consists of a series of elements <sub> - Subscript Text
HTML - elements label pieces of content such as "this is a <ins> - Inserted Text
heading", "this is a paragraph", "this is a link", etc. <del> - Deleted Text
Hypertext - refers to the way in which Web pages (HTML <big> - Larger Text
documents) are linked together. <small> - Smaller Text
Markup Language - which means you use HTML to
simply "mark up" a text document with tags that tell a Web PHRASE TAGS
browser how to structure it to display. <em> - Emphasized Text
<mark - >Marked Text
HTML ELEMENTS <strong> - Strong Text
<blockqoute> - Quoting Text
<q> - Short Quotations
<abbrev> - Abbreviation Text

HTML Comments
Comment - is a piece of code which is ignored by any
web browser.
HTML comments are placed in between
<!-- ... --> tags
HTML Links – Hyperlinks
HTML LIST HTML links are hyperlinks.
HTML lists - allow web developers to group a set of Note: A link does not have to be text. A link can be an
related items in lists. image or any other HTML element!
Unordered HTML List - An unordered list starts with the HTML Links - Syntax
<ul> tag. Each list item starts with the <li> tag. The HTML <a> tag defines a hyperlink. It has the following
Example syntax:
<ul> <a href="url">link text</a>
<li>Coffee</li>
<li>Tea</li> The target attribute specifies where to open the linked
<li>Milk</li> document.
</ul> The target attribute can have one of the following values:
Output: _self - Default. Opens the document in the same
 Coffee window/tab as it was clicked
 Tea _blank - Opens the document in a new window or tab
 Milk _parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window
Ordered HTML List - An ordered list starts with the <ol> HTML LINKS
tag. Each list item starts with the <li> tag. Link Titles
Example The title attribute specifies extra information about an
<ol> element. The information is most often shown as a tooltip
text when the mouse moves over the element.
<li>First</li>
Example
<li>Second</li>
<a href="https://www.w3schools.com/html/" title="Go to
<li>Third</li>
W3Schools HTML section">Visit our HTML Tutorial</a>
</ol>
Output:
WD MODULE 3
1.First
HTML TABLES AND FORMS
2.Second
What are Semantic Elements?
3.Third
A semantic element clearly describes its meaning to both
HTML Description Lists
the browser and the developer.
HTML also supports description lists.
Examples of non-semantic elements:
A description list is a list of terms, with a description of
<div> and <span> - Tells nothing about its content
each term.
The <dl> tag defines the description list, the <dt> tag
Examples of semantic elements:
defines the term (name), and the <dd> tag describes each
term: <form>, <table>, <article> ,<header>, <nav>, - Clearly
defines its content.
HTML IMAGES
HTML <img> tag is used to embed an image in a web
page. Div element
The <img> tag is empty, it contains attributes only, and The <div> tag defines a division or a section in an HTML
does not have a closing tag. document.
<img> tag has two required attributes: The <div> tag is used as a container for HTML elements -
which is then styled with CSS or manipulated with
src - Specifies the path to the image
JavaScript.
alt - Specifies an alternate text for the image
The <div> tag is easily styled by using the class or id
Image tag Attributes
attribute.
SRC, Width, Height, Alt.
Any sort of content can be put inside the <div> tag!
The Figure 3-41 shows a wireframe with four div Colspan – merges 2 or more columns into a single
elements inside the main element column
Rowspan – merges 2 or more rows into a single row.
Div attributes
Div elements - have attributes that provide information HTML FORMS
about the element What is HTML Form?
The id is a div attribute which identifies a unique area on HTML form - is used to collect user input. The user input
a webpage and distinguishes it from other page divisions is most often sent to a server for processing.
The Figure 3-43 shows the revised wireframe with the HTML <form> - element is used to create an HTML form
div element and id attribute value defined as container\ for user input
<form> element - is a container for different types of input
Class Attributes elements, such as: text fields, checkboxes, radio buttons,
A class attribute name can be applied to more than one submit buttons, etc.
div or other HTML element on a webpage
HTML FORM ELEMENTS
HTML Tables
HTML tables allow web developers to arrange data into The HTML <form> element can contain one or more of
rows and columns. the following form elements:
table in HTML - consists of table cells inside rows and <input> - The HTML <input> element is the most used
columns form element.
Each table cell is defined by a <td> and a </td> tag. <label> -
td - stands for table data. <select> - The <select> element is used to create a drop-
tr - stands for table row. down list.
<textarea> - The <textarea> tag defines a multi-line text
HTML TABLE TAGS input control.
<table> - Defines a Table The <textarea> element is often used in a form, to collect
<th> - Defines a header cell in table user inputs like comments or reviews.
<tr> -Defines a row in a table <button>
<td> - Defines a cell in table <fieldset>
<caption> - Defines a table caption <legend>
<colgroup> - Specifies a group of one or more columns in <datalist>
a table for formatting <output>
<col> - Specifies column properties for each column <option>
within a <colgroup> element <optgroup>
<thead> - Groups the header content in a table
<tbody> - Groups the body content in a table
<tfoot> - Groups the footer content in a table
COLGROUP
The <colgroup> tag specifies a group of one or more
columns in a table for formatting.
The <colgroup> tag is useful for applying styles to entire
columns, instead of repeating the styles for each cell, for
each row.
CAPTION TAG
The <caption> tag defines a table caption.
The <caption> tag must be inserted immediately after the
<table> tag. MODULE 4
THEAD TAG INTRO TO CSS
The <thead> tag is used to group header content in an
HTML table. What is CSS?
The <thead> element is used in conjunction with the CSS stands for Cascading Style Sheets. CSS is a
<tbody> and <tfoot> elements to specify each part of a standard style sheet language used for describing the
table (header, body, footer). presentation (i.e. the layout and formatting) of the web
pages.
Colspan & Rowspan
What you can do with CSS?
You can easily apply same style rules on multiple are defined in the <head> section of an HTML document
elements. using the <style> element.
You can control the presentation of multiple pages of a
website with a single style sheet. External Style Sheets
An external style sheet is ideal when the style is applied to
Advantages of using CSS many pages of the website.
The biggest advantage of CSS is that it allows the
separation of style and layout from the content of the
Linking External Style Sheets
document.
Before linking, we need to create a style sheet first.
Here are some more advantages
Importing External Style Sheets
CSS Save Lots of Time — CSS gives lots of flexibility to The @import rule is another way of loading an external
set the style properties of an element. style sheet.
Easy Maintenance — CSS provides an easy means to
update the formatting of the documents CSS Color
Pages Load Faster — CSS enables multiple pages to Setting Color Property
share the formatting information
The color property defines the text color (foreground color
Anatomy of a CSS in general) of an element.
Selector - This is the HTML element name at the start of Defining Color Values
the ruleset. It defines the element(s) to be styled (in this Colors in CSS most often specified in the following
example, <p> elements). To style a different element, formats:
change the selector. a color keyword - like "red", "green", "blue",
Declaration - This is a single rule like color: red;. It "transparent", etc.
specifies which of the element's properties you want to a HEX value - like "#ff0000", "#00ff00", etc.
style. an RGB value - like "rgb(255, 0, 0)"
Properties - These are ways in which you can style an
HTML element. (In this example, color is a property of the Color Keywords
<p> elements.) color value
Property value - To the right of the property—after the CSS defines the few color keywords which lets you
colon—there is the property value. specify s in an easy way.
Selecting Multiple Elements HEX Color Values
You can also select multiple elements and apply a single Hex (short for Hexadecimal) is by far the most commonly
ruleset to all of them. Separate multiple selectors by used method of defining color on the web.
commas. For example: RGB Color Values
Colors can be defined in the RGB model (Red, Green, and
CSS Selectors Blue) using the rgb() functional notation.
Element selector (sometimes called a tag or type selector)
CSS Background
Inserting CSS Setting Background Properties
Adding CSS in HTML Documents Background plays an important role in the visual
CSS can either be attached as a separate document or presentation of a web page.
embedded in the HTML document itself. There are three Background Color
methods of including CSS in an HTML document:
The background-color property is used to set the
Inline styles — Using the style attribute in the HTML start background color of an element.
tag.
Background Image
Embedded styles/Internal — Using the <style> element
in the head section of a document. The background-image property set an image as a
External style sheets — Using the <link> element, background of an HTML element.
pointing to an external CSS file. Background Repeat
The background-repeat property allows you to control how
Inline Styles - Inline styles are used to apply the unique a background image is repeated or tiled in the background
style rules to an element by putting the CSS rules directly of an element.
into the start tag. It can be attached to an element using Background Position
the style attribute. The background-position property is used to control the
position of the background image.
Embedded/Internal Style Sheets
Embedded or internal style sheets only affect the Background Attachment
document they are embedded in. Embedded style sheets
The background-attachment property determines whether The color of the text is defined by the CSS color property.
the background image is fixed with regard to the viewport Text Alignment
or scrolls along with the containing block The text-align property is used to set the horizontal
alignment of the text.
CSS Fonts Text Decoration
Styling Fonts with CSS The text-decoration property is used to set or remove
Choosing the right font and style is very crucial for the decorations from text.
readability of text on a page. Text Transformation
Font Family The text-transform property is used to set the cases for a
The font-family property is used to specify the font to be text.
used to render the text. Text Indentation
Difference Between Serif and Sans-serif Fonts The text-indent property is used to set the indentation of
Serif fonts have small line or stroke at the extremities of the first line of text within a block of text.
characters, whereas sans-serif fonts are straighter and do Letter Spacing
not have these small strokes. The letter-spacing property is used to set extra spacing
Font Style between the characters of text.
The font-style property is used to set the font face style for Word Spacing
the text content of an element. The word-spacing property is used to specify additional
Font Size spacing between the words.
The font-size property is used to set the size of font for the Line Height
text content of an element. The line-height property is used to set the height of the
Setting Font Size with Pixels text line. It is also called leading and commonly used to
Setting the font size in pixel values (e.g. 14px, 16px, etc.) set the distance between lines of text.
is a good choice when you need the pixel accuracy. Pixel
is an absolute unit of measurement which specifies a CSS Links
fixed length. Styling Links with CSS
Setting Font Size with EM Links or hyperlinks are an essential part of a website.
The em unit refers to the font size of the parent element. Modifying Standard Link Styles
When defining the font-size property, 1em is equal to the In all major web browsers such as Chrome, Firefox,
size of the font that applies to the parent of the element. Safari, etc.
Setting Font Size with Root EM Setting Custom Color of Links
To make things even more simpler CSS3 has introduced Simply use the CSS color property to define the color of
rem unit (short for "root em") which is always relative to your choice for different state of a link.
the font-size of the root element (html), regardless of
where the element lies CSS Lists
Setting Font Size with Keywords Types of HTML Lists
CSS provide several keywords that you can use to define There are three different types of list in HTML:
font sizes. Unordered lists — A list of items, where every list items
Setting Font Size with Viewport Units are marked with bullets.
The font sizes can be specified using viewport units such Ordered lists — A list of items, where each list items are
as vw or vh. marked with numbers.
Font Weight Definition list — A list of items, with a description of each
The font-weight property specifies the weight or boldness item.
of the font. This property can take one of the following Styling Lists with CSS
values: normal, bold, bolder, lighter, 100, 200, 300, 400, CSS provides the several properties for styling and
500, 600, 700, 800, 900 and inherit. formatting the most commonly used unordered and
Font Variant ordered lists.
The font-variant property allows the text to be displayed in CSS Tables
a special small-caps variation. Styling Tables with CSS
Tables are typically used to display tabular data, such as
CSS Text financial reports.
Formatting Text with CSS
CSS provides several properties that allows you to define Collapsing Table Borders
various text styles such as color, alignment, spacing, There are two distinct models for setting borders on table
decoration, transformation, etc. cells in CSS: separate and collapse.
Text Color
auto — Uses an automatic table layout algorithm.
fixed — Uses the fixed table layout algorithm.