Scribd
Upload
10 views

HTML and Css

Uploaded by

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

HTML and Css

Uploaded by

sailokeshpraneethsai
Copyright
© © All Rights Reserved
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