Web Designing

Lecture#5
Course Content:
Introduction to Web(World Wide Web)
HTML 5
CSS 3
JavaScript
Jquery
Bootstrap4
Wordpress
PHP
MySql
HTML Block and Inline Elements:
 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.

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.
Block level elements in HTML:
 <footer> Elements:
Block-Level
 <form>
 <h1>-<h6>
 <header>
 <hr>
 <li>
 <main>
 <nav>
 <ol>
 <p>
 <pre>
 <section>
 <table>
 <ul>
 <video>
Inline Elements
An inline element does not start on a new line and only takes up as much
width as necessary.
This is an inline <span> element inside a paragraph.
<span>Hello</span>
<span>World</span>
 Inline elements in HTML:
 <a>
 <abbr>
 <b>
 <span>
 <strong>
 <sub>
 <sup>
<div> Element:
 The <div> element is often used as a container for other HTML
elements.
 The <div> element has no required attributes,
but style, class and id are common.

 <div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city
in the United Kingdom, with a metropolitan area of over 13 million
inhabitants.</p>
</div>
 <span> Element:
 The <span> element is often used as a container for some text.
 The <span> element has no required attributes,
but style, class and id are common.

 E.g: <h1>My <span style="color:red">Important</span> Heading</h1>
HTML The class Attribute
The HTML class attribute is used to define equal styles for elements with the same class
name.

So, all HTML elements with the same class attribute will have the same format and style.
<style>
.Name{}
</style> 
<div class=“Name">
</div>

<div class=“Name">
</div>

<div class=“Name">
</div>
Multiple Classes
HTML elements can have more than one class name,
each class name must be separated by a space.

Example:
Style elements with the class name "city", also style
elements with the class name "main":

<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
HTML The id Attribute:
 The id attribute specifies a unique id for an HTML element (the value
must be unique within the HTML document).
 In CSS, to select an element with a specific id, write a hash (#)
character, followed by the id of the element:
Example:
 Use CSS to style an element with the id "myHeader":
<style>
#name {
} 
</style>
<h1 id=“name">My Header</h1>
Difference Between Class and ID:
 An HTML element can only have one unique id that belongs to that single element, while
a class name can be used by multiple elements:
Example:
 <style>
#myHeader { 
}
.city {
} 
</style>

<h1 id="myHeader">My Cities</h1>

<h2 class="city">London</h2>

<h2 class="city">Paris</h2>

<h2 class="city">Tokyo</h2>