Scribd
Upload
154 views27 pages

HTML and Css

HTML (Hypertext Markup Language) is a computer language used to create web pages and describe their structure. It uses tags to define headings, paragraphs, lists and other elements. CSS (Cascading Style Sheets) is used to describe the presentation and layout of HTML documents, including colors, fonts and more. Together, HTML and CSS are the core technologies for building web pages and web applications.

Uploaded by

Nidhihsa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
154 views27 pages

HTML and Css

HTML (Hypertext Markup Language) is a computer language used to create web pages and describe their structure. It uses tags to define headings, paragraphs, lists and other elements. CSS (Cascading Style Sheets) is used to describe the presentation and layout of HTML documents, including colors, fonts and more. Together, HTML and CSS are the core technologies for building web pages and web applications.

Uploaded by

Nidhihsa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 27

HTML ( HyperText Markup Language)

 HTML is a computer language devised to allow website creation.


HyperText is the method by which you move around on the web by
clicking on special text called hyperlinks which bring you to the next
page. HTML is a Language, as it has code-words and syntax like any
other language.

 Hyper Text: Hyper Text simply means "Text within Text". A text has a
link within it, is a hypertext. Every time when you click on a word which
brings you to a new webpage, you have clicked on a hypertext.

 Markup language: A markup language is a programming language


that is used make text more interactive and dynamic. It can turn a text
into images, tables, links etc.

Basic tags

 The <!DOCTYPE html> declaration defines this document to


be HTML5
 The<html>element is the root element of an HTML page
 The<head>element contains meta information about the
document
 The<title> element specifies a title for the document
 The<body>element contains the visible page content
 The<h1>element defines a large heading
 The <h6> element defines a smaller heading
 The<p>element defines a paragraph
Header Tags

The Html heading tag is six types.

<H1> H1 Header</H1>

<H2> H2 Header</H2>

<H3> H3 Header</H3>

<H4> H4 Header</H4>

<H5> H5 Header</H5>

<H6> H6 Header</H6>

Sample Programming

<!DOCTYPE html>
<html>
<head>
<title>This is my title</title>
</head>
<body>

<H1> H1 Header</H1>
<H2> H2 Header</H2>
<H3> H3 Header</H3>
<H4> H4 Header</H4>
<H5> H5 Header</H5>
<H6> H6 Header</H6>
<p>My first paragraph.</p>

</body>
</html>

HTML Element

HTML elements with no content are called empty elements. Empty


elements do not have an end tag, such as the <br> element.

HTML Attributes

 All HTML elements can have attributes


 Attributes provide additional information about an element
 Attributes are always specified in the start tag

The href Attribute

HTML links are defined with the <a> tag. The link address is specified in the
“ href” attribute

<a href="https://litztech.in">View our page</a>


HTML TABLE

An HTML table is defined with the <table >tag and closing


with</table>

<td> : elements are the data containers of the table.

They can contain all sorts of HTML elements; text, images, lists,
other tables, etc.

<th> : elements are the header containers of the table.

Ex:

<h2>HTML</h2>

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>
<th>Age</th>

</tr>

<tr>

<td>Jill</td>

<td>Smith</td>

<td>50</td>

</tr>

<tr>

<td>Eve</td>

<td>Jackson</td>

<td>94</td>

</tr>

<tr>

<td>John</td>

<td>Doe</td>

<td>80</td>

</tr>

</table>
HTML List Example

1 An Unordered List <ul>


<h2>An Unordered HTML List</h2>

<ul>
<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

2 An Ordered List: <ol>

<h2>An Ordered HTML List</h2>


<ol>
<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ol>

Block-level Elements

A block-level element always starts on a new line and takes up the full width
available (stretches out to the left and right as far as it can).
The <div> element is a block-level element.

<div>Hello</div>

<div>World</div>

HTML IFRAMES

An iframe is used to display a web page within a web page.

An HTML iframe is defined with the <iframe> tag.


The SRC attribute specifies the URL (web address) of the inline frame page.

Use the height and width attributes to specify the size of the iframe.

The attribute values are specified in pixels by default, but they can also be in
percent (like "80%").

<iframe src="first.html" height="200" width="300"></iframe>

Setting The Viewport

When making responsive web pages, add the following <meta> element in
all your web pages:

<meta name="viewport" content="width=device-width, initial-


scale=1.0">

HTML Symbol Entities

HTML entities were described in the previous chapter.

Many mathematical, technical, and currency symbols, are not present on a


normal keyboard.

EX:

<p>I will display &euro;</p>


<p>I will display &#8364;</p>
<p>I will display &#x20AC;</p>
∀ &#8704; &forall; FOR ALL

∂ &#8706; &part; PARTIAL DIFFERENTIAL

∃ &#8707; &exist; THERE EXISTS

∅ &#8709; &empty; EMPTY SETS

∇ &#8711; &nabla; NABLA

∈ &#8712; &isin; ELEMENT OF

∉ &#8713; &notin; NOT AN ELEMENT OF

∋ &#8715; &ni; CONTAINS AS MEMBER

∏ &#8719; &prod; N-ARY PRODUCT

∑ &#8721; &sum; N-ARY SUMMATION


HTML FORMS
Form elements are different types of input elements, like text fields,
checkboxes, radio buttons, submit buttons, and more.

The <INPUT> element is the most important form element.

The <INPUT> element can be displayed in several ways, depending on


the typeattribute.

The HTML <FORM>element defines a form that is used to collect user input.

<INPUT TYPE=”TEXT”> defines a one-line input field for text input

The <input> Element

The most important form element is the <input> element.

The <input> element can be displayed in several ways, depending on the


type attribute.
Input Type Text

<input type="text"> defines a one-line text input field

What are Semantic Elements?

A semantic element clearly describes its meaning to both the


browser and the developer.

Examples of non-semantic elements: <div> and <span> - Tells


nothing about its content.

Examples of semantic elements: <form>, <table>, and <article>


- Clearly defines its content. HTML5 offers new semantic elements to
define different parts of a web page

 <article>
 <aside>
 <details>
 <figcaption>
 <figure>
 <footer>
 <header>
 <main>
 <mark>
 <nav>
 <section>
 <summary>
 <time>

HTML Canvas

The HTML <canvas> element is used to draw graphics on a web page.

The graphic to the left is created with <canvas>. It shows four elements: a
red rectangle, a gradient rectangle, a multicolor rectangle, and a multicolor
text.

What is HTML Canvas

The HTML <canvas> element is used to draw graphics, on the fly, via
JavaScript.

The <canvas> element is only a container for graphics. You must use
JavaScript to actually draw the graphics.

SVG

 SVG stands for Scalable Vector Graphics


 SVG is used to define graphics for the Web
 SVG is a W3C recommendation

The HTML <svg> element is a container for SVG graphics.


Multimedia

Multimedia comes in many different formats. It can be almost anything you


can hear or see.

Examples: Images, music, sound, videos, records, films, animations, and


more.

Web pages often contain multimedia elements of different types and


formats.

MP4 is the new and upcoming format for internet video.

MP4 is recommended by YouTube.

MP4 is supported by Flash Players.

MP4 is supported by HTML5.

Before HTML5, a video could only be played in a browser with a plug-in (like
flash).

The HTML5 <video> element specifies a standard way to embed a video in a


web page.

Audio on the Web

Before HTML5, audio files could only be played in a browser with a plug-in
(like flash)The HTML5 <audio> element specifies a standard way to embed
audio in a web page.

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
CSS (Cascading Style Sheets)

CSS is a language that describes the style of an HTML document. CSS


describes how HTML elements should be displayed. CSS stands for
Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper,
or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all
at once
External stylesheets are stored in CSS files

CSS is used to define styles for your web pages, including the design, layout
and variations in display for different devices and screen sizes.

HTML was NEVER intended to contain tags for formatting a web page!

HTML was created to describe the content of a web page, like:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

When tags like <font>, and color attributes were added to the
HTML 3.2 specification, it started a nightmare for web developers.
Development of large websites, where fonts and color information
were added to every single page, became a long and expensive
process.

The style definitions are normally saved in external .css files.

With an external stylesheet file, you can change the look of an entire
website by changing just one file!
Three Ways to Insert CSS

 External style sheet


 Internal style sheet
 Inline style

External Style Sheet

With an external style sheet, you can change the look of an entire website
by changing just one file!

Each page must include a reference to the external style sheet file inside
the <link> element. The <link> element goes inside the <head> section:
CSS Selectors

An external style sheet can be written in any text editor. The file should not
contain any html tags. The style sheet file must be saved with a .css
extension.

CSS selectors are used to "find" (or select) HTML elements based on their
element name, id, class, attribute, and more.

Internal Style Sheet

An internal style sheet may be used if one single page has a unique style.

Internal styles are defined within the <style> element, inside the <head>
section of an HTML page:
<style>

body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>

Inline Styles

An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute
can contain any CSS property.

<h1 style="color:blue;margin-left:30px;">This is a heading</h1>

Multiple Style Sheets

If some properties have been defined for the same selector (element) in
different style sheets, the value from the last read style sheet will be used.
h1 {
color: navy;
}
CSS Backgrounds

The CSS background properties are used to define the background effects
for elements.

CSS background properties:

background-color
background-image
background-repeat
background-attachment
background-position

With CSS, a color is most often specified by:

 a valid color name - like "red"


 a HEX value - like "#ff0000"
 an RGB value - like "rgb(255,0,0)"

Border Style

The border-style property specifies what kind of border to display

dotted - Defines a dotted border

dashed - Defines a dashed border

solid - Defines a solid border


double - Defines a double border

groove - Defines a 3D grooved border. The effect depends on the border-


color value

ridge - Defines a 3D ridged border. The effect depends on the border-color


value

inset - Defines a 3D inset border. The effect depends on the border-color


value

outset - Defines a 3D outset border. The effect depends on the border-color


value

none - Defines no border

hidden - Defines a hidden border

The border-style property can have from one to four values (for the top
border, right border, bottom border, and the left border).

Ex:
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
CSS Margins

The CSS margin properties are used to create space around elements,
outside of any defined borders.

With CSS, you have full control over the margins. There are properties for
setting the margin for each side of an element (top, right, bottom, and left).

CSS has properties for specifying the margin for each side of an element:

 margin-top
 margin-right
 margin-bottom
 margin-left

Individual Sides

CSS has properties for specifying the margin for each side of an element:

margin-top

margin-right

margin-bottom

margin-left
The element Selector

The element selector selects elements based on the element name.

All the margin properties can have the following values:

 auto - the browser calculates the margin


 length - specifies a margin in px, pt, cm, etc.
 % - specifies a margin in % of the width of the containing element
 inherit - specifies that the margin should be inherited from the parent
element

Padding

CSS has properties for specifying the padding for each side of an element:

padding-top
padding-right
padding-bottom
padding-left

You can select all <p> elements on a page like this (in this case, all <p>
elements will be center-aligned, with a red text color):

p {
text-align: center;
color: red;
}
The id Selector

The id selector uses the id attribute of an HTML element to select a specific


element.

The id of an element should be unique within a page, so the id selector is


used to select one unique element!

To select an element with a specific id, write a hash (#) character, followed
by the id of the element.

#hai {
text-align: center;
color: red;
}

The class Selector

The class selector selects elements with a specific class attribute.

To select elements with a specific class, write a period (.) character,


followed by the name of the class.The class selector selects elements with
a specific class attribute.

To select elements with a specific class, write a period (.) character,


followed by the name of the class.The class selector selects elements with
a specific class attribute.
To select elements with a specific class, write a period (.) character,
followed by the name of the class.

.center {
text-align: center;
color: red;
}

We can also specify that only specific HTML elements should be affected by
a class.

In the example below, only <p> elements with class="center" will be center-
aligned:

The display Property

The display property specifies if/how an element is displayed.

Every HTML element has a default display value depending on what type
of element it is. The default display value for most elements is block or
inline.

Using width

Setting the width of a block-level element will prevent it from


stretching out to the edges of its container. Then, you can set the
margins to auto, to horizontally center the element within its
container.
The element will take up the specified width, and the remaining
space will be split equally between the two margins

The display: inline-block Value

Compared to display: inline, the major difference is that display: inline-block


allows to set a width and height on the element.

Also, with display: inline-block, the top and bottom margins/paddings are
respected, but with display: inline they are not.

Compared to display: block, the major difference is that display: inline-block


does not add a line-break after the element, so the element can sit next to
other elements.

CSS Combinators

A CSS selector can contain more than one simple selector. Between the
simple selectors, we can include a combinator.

There are four different combinators in CSS:

descendant selector (space)


child selector (>)
adjacent sibling selector (+)
general sibling selector (~)
Javascript

JavaScript is a very powerful client-side scripting language. JavaScript is


used mainly for enhancing the interaction of a user with the webpage. In
other words, you can make your webpage more lively and interactive, with
the help of JavaScript. JavaScript is also being used widely in game
development and Mobile application development. JavaScript was
developed by Brendan Eich in 1995, which appeared in Netscape, a
popular browser of that time. JavaScript runs on any operating
system including Windows, Linux or Mac.

Basic validation

<script>

alert(“fields should not be left empty”);

<script>

First program

One of many JavaScript HTML methods is getElementById().


This example uses the method to "find" an HTML element (with id="demo")
and changes the element content (innerHTML) to "Hello JavaScript":

<!DOCTYPE html>

<html>
<body>
<p id="demo">
</p>
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
</body>

</html>

JavaScript can "display" data in different ways:

1) Writing into an HTML element, using innerHTML.

2) Writing into the HTML output using document.write().

3) Writing into an alert box, using window.alert().

4) Writing into the browser console, using console.log().

Variables

JavaScript variables are containers for storing data values. In this example,
x, y, and z, are variables:

<script>

var x = 5;
var y = 6;
var z = x + y;

document.getElementById("demo").innerHTML = "The value of z is: " + z;


//11

</script>
Datatypes

JavaScript variables can hold many data types: numbers, strings, objects
and more:

<script>

var x = 16 + "Volvo";
document.getElementById("demo").innerHTML = x; //16Volvo

</script>

Functions

A JavaScript function is a block of code designed to perform a particular


task. A JavaScript function is executed when "something" invokes it (calls
it).

<script>

function myFunction(p1, p2) {


return p1 * p2;
}
document.getElementById("demo").innerHTML = myFunction(4, 3); //12
</script>
Function Invocation

The code inside the function will execute when "something" invokes (calls)
the function:
When an event occurs (when a user clicks a button)
When it is invoked (called) from JavaScript code
Automatically (self invoked)

Conditional Statements

Very often when you write code, you want to perform different actions for
different decisions.
You can use conditional statements in your code to do this. In JavaScript we
have the following conditional statements: Use if to specify a block of code
to be executed, if a specified condition is true
Use else to specify a block of code to be executed, if the same condition is
false Use else if to specify a new condition to test, if the first condition is
false Use switch to specify many alternative blocks of code to be executed

You might also like