Scribd
Upload
15 views

HTML and Css

Uploaded by

sailokeshpraneethsai
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
15 views

HTML and Css

Uploaded by

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

HTML AND CSS

HTML Structure
• <!DOCTYPE html>
• <html lang="en">
• <head>
• <meta charset="UTF-8">
• <meta name="viewport" content="width=device-width, initial-scale=1.0">
• <title>My Simple Page</title>
• <link rel="stylesheet" href="styles.css">
• </head>
• <body>
• <h1>Welcome to My Page</h1>
• <p>This is a simple paragraph of text.</p>
• <button id="myButton">Click Me!</button>
• <ul>
• <li>Item 1</li>
• <li>Item 2</li>
• <li>Item 3</li>
• </ul>
• <div id="result"></div>

• <script src="script.js"></script>
• </body>
• </html>
HTML TAGS
• <div>: A block-level container for grouping content.
• <p>: Represents a paragraph of text.
• <h1>, <h2>, <h3>... <h6>: Header tags for titles and
headings.
• <a>: An anchor tag for hyperlinks.
• <ul>, <ol>, <li>: For unordered (bulleted) and ordered
(numbered) lists.
• <img>: For images.
• <button>: For clickable buttons.
image tag
• The <img> tag is used to embed an image in an HTML
page.

attributes:

src,width,height,alt,style
HTML Styles

background-color: for background color


• color: for text colors
• font-family: for text fonts
• font-size: for text sizes
• text-align: for text alignment
Html Formatting element
• <b>-bold text
<i>-italic D
e

<em>-emphazied text f
i
n

<strong>-bold the text e


s

<small>-make the text small d


e
l

<sub>-subscripted text e
t
e

<sup>-superscripted text d

<ins>-insert the text e


x
t

<del>-delete the text


<mark>-highlight the text
HTML Quotation and Citation
• <abbr>-abbreviation or acronym
<address>-address
<bdo>-reversing the charcter
<blockquote>blocking the quote for particular paragraph
<cite> for highlight the first words in book title
<q>-quotation for the sentence
Inline
• Inline CSS

Example

<p style="color:red;">A red paragraph.</p>


internal css
• Example:

<style>
• body {background-color: powderblue;}
• h1 {color: blue;}
• p {color: red;}
• </style>
External css

<link rel="stylesheet" href="styles.css">

style.css

body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}
border
• surrounded by border
syntax:
border:2px yellow;
properties
border-width: Specifies the width of the border (e.g., 1px,
2px).
• border-style: Defines the style (e.g., solid, dotted,
dashed).
• border-color: Sets the color of the border (e.g., red, #000,
rgba(255, 255, 255, 0.5)).
margin
• space between one element and another element

Syntax:

margin:2px;
padding
• space between element and border

syntax:
padding:2px
tables
• <table>
• <tr>
• <th>Company</th>
• <th>Contact</th>
• <th>Country</th>
• </tr>
• <tr>
• <td>Alfreds Futterkiste</td>
• <td>Maria Anders</td>
• <td>Germany</td>
• </tr>
• <tr>
• <td>Centro comercial Moctezuma</td>
• <td>Francisco Chang</td>
• <td>Mexico</td>
• </tr>
• </table>
Lists in html
• unordered lists:

<ul>
• <li>Coffee</li>
• <li>Tea</li>
• <li>Milk</li>
• </ul>
ordered list
• <ol>
• <li>Coffee</li>
• <li>Tea</li>
• <li>Milk</li>
• </ol>
description list
• <dl>
• <dt>Coffee</dt>
• <dd>- black hot drink</dd>
• <dt>Milk</dt>
• <dd>- white cold drink</dd>
• </dl>
Input methods in html

• Text Input: <input type="text">


• Password Input: <input type="password">
• Email Input: <input type="email">
• URL Input: <input type="url">
• Number Input: <input type="number">
• Range Input: <input type="range">
• Checkbox Input: <input type="checkbox">
• Radio Button Input: <input type="radio">
• File Upload Input: <input type="file">
• Date Input: <input type="date">
• Time Input: <input type="time">
• Color Input: <input type="color">
iframe
• iframe is used to display a web page within a web page.
Syntax:
<iframe src="https://www.w3schools.com"
width="500"></iframe>
attributes:
src,
title,
width,
height
defining style using classes
• <style>
• .city {
• background-color: tomato;
• color: white;
• border: 2px solid black;
• margin: 20px;
• padding: 20px;
• }
• </style>

<div class="city">
• <h2>London</h2>
• <p>London is the capital of England.</p>
• </div>
defining style using id
• <style>
• #city {
• background-color: tomato;
• color: white;
• border: 2px solid black;
• margin: 20px;
• padding: 20px;
• }
• </style>

<div id="city">
• <h2>London</h2>
• <p>London is the capital of England.</p>
• </div>

You might also like