Scribd
Upload
377 views

HTML & CSS

HTML is the standard markup language used to create web pages. It uses tags like <html> and <body> to define the structure of a page. CSS is used to style and lay out HTML elements. Some common HTML elements are lists, links, images, tables, forms, and generic containers like <div> and <span>. CSS can select elements and apply properties like color to style them. HTML and CSS are essential technologies for building web pages.

Uploaded by

archananarayanan223
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
377 views

HTML & CSS

HTML is the standard markup language used to create web pages. It uses tags like <html> and <body> to define the structure of a page. CSS is used to style and lay out HTML elements. Some common HTML elements are lists, links, images, tables, forms, and generic containers like <div> and <span>. CSS can select elements and apply properties like color to style them. HTML and CSS are essential technologies for building web pages.

Uploaded by

archananarayanan223
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 30

HTML & CSS

HTML is the standard markup language


for creating Web Pages
➢ describes the structure of a Web page
➢ consists of a series of elements
➢ elements tell the browser how to display the
content
All HTML documents must start with a document type
declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends


with </html>.

The <head> tag allows you to add metadata describing


your HTML pagee.

The visible part of the HTML document is between


<body> and </body>.
Tags, Elements & Attributes

Tags Elements
HTML instruction Two tags plus
everything inside it

Attributes
Describes the tags they
are placed inside of.
Commonly used Attributes:

Class Id
To group a set of elements that can be Similar to Class, but the values of
depicted with a common behavior. this attribute must all be unique.

Eg: <p class=”red”> Blood </p> Eg: <p id=”first”> Blood </p>
<p class=”red”> Roses </p> <p id=”second”> Roses </p>
Commonly used Elements:

Lists Links Images

Tables Forms Generic Containers


Lists

01 02
Ordered 03
Unordered List List Description List
<ul> <ol> <dl>
<li>Coffee</li> <li>Coffee</li> <dt>Coffee</dt>
<li>Tea></li> <li>Tea</li> <dd>-Black Drink</dd>
<li>Milk</li> <li>Milk</li> <dt>Milk</dt>
</ul> </ol> <dd>-White Drink</dd>
<dl>
Links
<a> - defines a hyperlink
If the <a> tag has no href attribute, it is only a placeholder for hyperlink.

Attributes to be Noted-

Target
href download
<a href=”images.jpg”>Image</a> (_blank, _self, _parent, _top )
<a href=”images.jpg” download >
<a href=”images.jpg” target=”_blank”>Image</a>
Image</a>
Images
<img src= cat.png alt=”Picture of Cat.”>
(Can include width & height attributes.)

There are times where you want to give your image a caption.
<figure>
<img src=”cat.png”>
<figcaption> Picture of a cat </figcaption>
</figure>
Tables
Surrounds & defines table start &
<table> </table> end.

<tr> </tr> Stands for table row

<th> </th> Stands for table header

<td> </td> Stands for a call of table data.

Attributes-
Rowspan , Colspan - You can make cells span either multiple rows or multiple
columns.
Eg:
<table >
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
Forms
Action - the location that the information from the form is being sent to

Method - defines how the form is going to send the information. ( GET/ POST)

Input Methods-

Text Option
Select Input Button
Area Groups
essentially boxes where you can
input text. Support multiple lines To group together the
of text with optional attributes to options
control the size of them Button
Select

Text
Option
Area The select tag is the Groups
outermost tag, and Specify the Action of
inside you can define the button by using the
the options to choose type Attribute.
from, using the option (button, submit, reset)
tag.
Input- The input tag can turn into many different things due to its versatile type
attribute.

Single-line input
Checkbox that has two field - min, max
Single line text field states attributes

Password Radio Submit

Text Check Box Number


any text inputted will be Only one option can be submits the form
visually overridden selected in a group of to the destination
them defined in the
by dots or stars
action attribute
Labels-
name Attribute - giving a name to the piece of data.
Eg: <input type=”text” name=”username”>

After you have given the tags name attributes, it is also good practice to give them
visible labels, using the label tag.
Eg: <label for=”username”> Enter user name: </label>
<input type=”text” name=”username”>

In Order to give a single label to a group of them use fieldsets and legend .

Eg: <fieldset>
<legend>Name</legend>
<label for=”first”> First Name: </label>
<input type=”text” name=”first”>
<label for=”last”> Last Name: </label>
<input type=”text” name=”last”>
</fieldset>
Generic Containers
These tags are used to group a set of elements - mostly to be able to apply CSS or target with JS.

<div> </div> <span></span>

● Accomplishes the same thing as div, except it is


● Defaults to a block
inline.
● Starts on its own new line
● Wraps the content but remains inside the same
● <div class= “input-form”> line.
<label for=”last”>Name: </label> ● <p> The <span class=”space” Solar
<input type=”text” name=”myName”> System</span> is a cool place </p>
</div>
Event Attributes:
- ability to let events trigger actions in a browser

Commonly used event attributes:


1. onload() - Fires after the page is finished loading
- <body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script> and
<style>
1. onselect() - Fires after some text has been selected in an element
- <input type="file">, <input type="password">, <input type="text">, and <textarea>
1. onsubmit() - Fires when a form is submitted
- <form>
1. onclick()- Fires on a mouse click on the element
- All HTML elements, EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>,
<param>, <script>, <style>, and <title>
Styles & CSS
CSS - Cascading Style
Sheets
CSS can be added to HTML documents in 3 ways:

Inline By using the style attribute inside HTML elements

Internal By using <style> element in the <head> section

External By using a <link> element to link to an external CSS file

The hierarchy that the browser will follow is external, internal, then inline .
CSS Jargons:

01 02 03
Property & Lengths
Selectors
Value Absolute Lengths:
h2{ color: green; } Px- pixels
color: green; Pt- points
.dog { color: green; }
#fluffy {color:green; } In- inches
a[href] { color: purple; } Relative Lengths:
input[type=”number”] { % - percent
width: 10 rem; Em- current font size
} Rem- current font size
on HTML element
Colors in CSS:
RGB- Red, Green, Blue HSL - Hue, Saturation, Lightness Hexadecimal
● Color's hex value
● Percentage or Byte-Based ● Hue- from color wheel, Saturation- ● Start with a #, followed
● body { percent of color, Lightness- light/dark. by six digits in base-16.
● body {
background-color: rgb(0,0,255);
● body {
} background-color: hsl (120, 100%,
background-color:
75%);
body { #00FF00;
} }
background-color: rgb(50%,0,50%);
}
Text Styles:

font-family line-height
font-weight letter-spacing
font -style: normal, italic, oblique word -spacing

Text Alignment

Fonts text-transform: capitalize, uppercase, Spacing text-align: left, right,


lowercase, none
center
text-decoration: underline, overline,
line-through, none text-indent

text-decoration-style: solid,
wavy,double, dotted, dashed
Box Model:
Grouping & Nesting

Group Selectors
h1, h2, .highlight {
Color: grey;
}

Nesting
Desendant- body p { color: blue; }
Child Selector- body > p {color: blue; }
Adjacent Selector- h1+p {color: blue}
Pseudo-Classes & Pseudo Elements
a:visited {
color: purple; p:first-child {color: green; }
} p:nth-child(4) {color:
a:link { input:focus { blue; }
color: blue; background-color: grey; p:last-child {color: grey;}
} }

Hover Active First

Child
Links Focus Element
p:hover { a:active {
color: green;
s p:first-letter {
font-size:2rem; }
color: green;
} p:first-line {
}
color:red; }
Display Properties
how elements interact with each other on the page and how they are rendered.

Inline-
None Inline Block Flex
Block
Positioning:
positioned relative to the
browser's window
Specify an offset from where it would stays even when the page
usually render with the top, bottom, left, is scrolled up or down.
right properties.
Absolute

Relative relative to the closest parent that has a Fixed


position value other than static.
Fully Functional Frontend- HTML + CSS + JS
Plugging JS to HTML:

<script> </script>

Eg:

<p id= “demo”></p>


<script>
document.getElementById(“demo”).innerHTML = “Hello JS!”;
</script>

OR
<script src=”myscript.js”>
Practice Sessions:
https://www.w3resource.com/html-css-exercise/main-html-css-exercises.php

http://rua.ua.es/dspace/bitstream/10045/20201/20/CSS%20Exercise.pdf

https://rua.ua.es/dspace/bitstream/10045/20201/19/HTML%20Exercises.pdf

http://flexboxfroggy.com/

http://www.landofcode.com/html-exercises/

You might also like