HTML and CSS
- 4. HTML Advance Layout
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
- 5. HTML Advance Layout
● <header> - Defines a header for a
document or a section
● <nav> - Defines a container for
navigation links
● <section> - Defines a section in a
document
● <article> - Defines an independent self-
contained article
● <aside> - Defines content aside from
the content (like a sidebar)
● <footer> - Defines a footer for a
document or a section
● <details> - Defines additional details
● <summary> - Defines a heading for the
<details> element
- 6. HTML TAGs - Elements and Attributes
Examples -
<a href="https://www.w3schools.com">This is a link</a>
<img src="img_girl.jpg" width="500" height="600">
- 7. HTML - Important tags
Headings
<h1>- </h1>
<h2>- </h2>
<h3>- </h3>
<h4>- </h4>
<h5>- </h5>
<h6>- </h6>
Paragraphs
<p>-</p>
Content holders
<div>-</div>
<span>-</span>
Listings
<ul> <ol>
<li>A</li> <li>A</li>
<li>B</li> <li>B</li>
</ul> </ol>
Table
<table>
<th>
<td></td>
<td></td>
</th>
<tr>
<td></td>
</tr>
</table>
- 8. HTML - styling
Basic styling with tags
● <b> - Bold text
● <strong> - Important text
● <i> - Italic text
● <em> - Emphasized text
● <mark> - Marked text
● <small> - Small text
● <del> - Deleted text
● <ins> - Inserted text
● <sub> - Subscript text
● <sup> - Superscript text
Element types
- Block
- inline
- 9. CSS - Basic
● Cascading style sheet
● How element should look like
● Color, size, shape, position
● CSS can be added to HTML elements in 3 ways
● Inline - by using the style attribute in HTML elements
● Internal - by using a <style> element in the <head> section
● External - by using an external CSS file
- 10. CSS - Inline Styling
● Mostly used for single element to style
● Uses the style attribute of html element
● Example -
<h1 style="color:blue;">This is a Blue Heading</h1>
- 11. CSS - Internal Styling
● Used to define style for single html page
● Is defined in the <head> section within <style> tag
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
- 12. CSS - External Styling
● Used defined style for multiple html pages
● You can change look of entire website with single file
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
body {
background-color:
powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
- 13. CSS - Properties
font: 15px arial, sans-serif;
background: lightblue url("img_tree.gif") no-repeat fixed center;
padding: 10px; padding: 10px 2px; padding: 5px 10px 15px 20px;
border: 5px solid red;
width: 500px; width: 50%;
Try different properties in chrome debugger
Reference: https://www.w3schools.com/cssref/default.asp
- 14. CSS - concept
Padding and Margin
Float: left, right, none;
Position: static, relative, absolute, fixed