Web day01 MOL.pdf

Topics
What is Web Development
Basics Of CSS
Project- McDonals
Fundamentals of HTML
@parteek_118
@nishchay_veer

Basic Structure of
HTML Document

Head Tag
The <head> element is a container for metadata (data about data) and is placed
between the <html> tag and the <body> tag.
Metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, character set, styles, scripts, and
other meta information.

Paragraph Tag
The <p> tag defines a paragraph.
Browsers automatically add a single blank line before and after each <p> element.

Heading Tag
The <h1> to <h6> tags are used to define HTML headings.
<h1> defines the most important heading. <h6> defines the least important
heading.

Horizontal Rule
The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).
The <hr> element is most often displayed as a horizontal rule that is used to separate content (or define a
change) in an HTML page.

Break Tag
The <br> tag inserts a single line break
Self closing tag

Unordered List
The <ul> tag defines an unordered (bulleted) list
Use the <ul> tag together with the <li> tag to create unordered lists

Ordered List
The <ol> tag defines an ordered list. An ordered list can be numerical or
alphabetical
The <li> tag is used to define each list item

<a href="https://www.hackmol.tech">HackMOL</a>
Anchor tag
Hypertext
Reference
Page to Load Text to be displayed

< i m g s r c = " n i t J a l a n d h a r . p n g " / >
Image tag
Name of the image
Source
Self closing tag
src Attribute provides the name and extension of image file
Make sure images are in the same folder as html file

Division tag
Used to divide webpage into different section or division
Basically used to apply different CSS effects to different section of
webpage

Table
Price List
Table row(<tr>)
Table heading(<th>)
Apple
Mango
50
80 Table data(<td>)
<table>

Table
prices
Apple
Mango
50
80

CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be
displayed on screen, paper, or in other media
we can Design,add colors, change fonts, add
Animations to our website to present the website in
a more redable format
CSS

CSS Selector
in order to style the website we need to select the HTML element to be
style.
This is Done with the help of CSS selectors
The element selector
selects HTML elements
based on the element
name
1 .Element Selector

CSS Selector
selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character,
followed by the class name.
2. Class Selector

uses the id attribute of an HTML element to select an element.
Id of an Element is unique within a page,so it is used to select one
unique elementCodre
3. Id Selector
CSS Selector

Types of CSS
Inline CSS
Internal CSS
External CSS
Inline CSS
The style information is added directly to one particular element using its
style attribute.

Internal CSS
An internal CSS is used to
define a style for a single
HTML page.
It is defined in the <head>
section of an HTML page,
within a <style> tag.

External CSS
The entire CSS style is written in one CSS file with a ".css"
extension.
The file is Linked to the HTML with a link tag

Adding Color
Color keyword
RGB Values
HEX values
HSL values
There are several different ways to specify colors in CSS.

The easiest way to specify a color is using predefined color keywords
specified in CSS.
Color keyword

RGB colors have three values that represent: red, green, and blue
Each value can be a number between 0 and 255 or a percentage
from 0 to 100%
A value of 0 means none of that color is being used
A value of 255 or 100% means all of that color is being used
RGB values

The most common way to represent colors in CSS
It is an another way to represent the RGB values.
Instead of using three numbers between 0 and 255, you use six hexadecimal
numbers. Hex numbers can be 0-9 and A-F
HEX values

Background Properties
background-image
background-color
background-position
background-repeat
A property of the CSS which sets all background style
at once such as color, image,size and repeat method
Properties:

font-size
color
font weight
font-style
text-transform
text-decoration
To change the way our fonts looks we have several properties we can change
1.
2.
3.
4.
5.
6.
Font & Text

Font Size And Color
CSS font size property is used to change the size of the
font
CSS Color property is used to change the color of font

Font Style And Weight
CSS font style property specifies the font style for a text like
italic,oblique,normal
CSS font weight property defines the weight of the font and specify
that how bold a font is
CSS font weight can be from 100 to 900

Font Family
It is used to change the face of the font

CSS Borders
borer-style
border-width
border-radius
border-color
The CSS border properties allow you to specify the style, width, and color
of an element's border.
Border Styles:

The CSS box model is essentially a box that wraps around every HTML element.
It consists of: margins, borders, padding, and the actual content
CSS Box Model

padding-top
padding-right
padding-bottom
padding-left
padding :{ top, right, bottom, left }
The CSS padding properties are used to generate space around an element's
content, inside of any defined borders.
CSS has properties for specifying the padding for each side of an element:
Syntax :
Padding

margin-bottom
margin-left
margin-right
margin-top
margin :{ top, right, bottom, left }
The CSS margin properties are used to create space around elements,
outside of any defined borders.
This property is a shorthand for the following CSS properties:
Syntax :
Margins

Web day01 MOL.pdf

Recommended

Recommended

More Related Content

Similar to Web day01 MOL.pdf

Similar to Web day01 MOL.pdf (20)

Recently uploaded

Recently uploaded (20)

Web day01 MOL.pdf