Web Development with HTML and CSS

Jul 12, 2024

Web Development with HTML and CSS

Introduction

  • Instructor Introduction: Overview of HTML and CSS
  • Main Focus: Teach HTML first, then CSS
  • Subscription Reminder: Encouragement to subscribe to the channel

Why Learn HTML?

  • Importance of HTML: Essential for creating/ managing websites
  • Career Advantages: Useful for various businesses with online presence

HTML Basics

  • Acronym: HTML stands for HyperText Markup Language
  • Usage: Tags and Markup convey content display to web browsers
  • **Common Tags: **
    • Header Tags: <h1> ... <h6> for titles
    • Paragraph Tags: <p> for paragraphs
    • Anchor Tags: <a> for hyperlinks
  • Structure: Adds foundation and structure to web pages
  • Analogy: HTML is like the foundation of a house

CSS Basics

  • Acronym: CSS stands for Cascading Style Sheets
  • Usage: Adds styles, decoration, layout to HTML content
  • Analogy: CSS is like the interior design of a house
  • Tools Required: Modern web browser (Chrome, Firefox), text editor (VS Code)

Getting Started with VS Code

  • **Download Steps: **
  • **Creating a Workspace: **
    • Create a folder for website files
    • Open the folder within VS Code
    • Create index.html as the home page
  • Live Server Extension: Enable live updates in the browser when HTML is edited

Basic HTML Structure

  • HTML5 Declaration: <!DOCTYPE HTML>
  • HTML Tags: Root element of HTML page
  • Head Element: Contains meta-information, like the title (<title>)
  • Body Element: Contains visible content
  • Header Tags: Example like <h1>, <h2>, etc.
  • Paragraph Tags: Example <p>Some Text</p>
  • **Line Breaks and Horizontal Rules: **
    • <br> for line breaks
    • <hr> for horizontal lines
  • Comments: Use <!-- Comment --> to add notes

Exercise

  • Task: Create a new HTML file that displays song lyrics
  • Steps:
    1. Create lyrics.html
    2. Add HTML5 Declaration
    3. Add head and body elements
    4. Include a Header and paragraph tags for lyrics

Hyperlinks in HTML

  • Creating Links:
    • Use anchor tags <a> and href attribute
    • Example: <a href="url">Click Me</a>
  • Attributes:
    • target="_blank" to open in new tab
    • title to show tooltips
    • Link Types: Absolute URL (external) and Relative URL (internal)
  • Email Links: mailto:email@example.com

Adding Images in HTML

  • Image Tag: <img> with src attribute for source
  • Attributes:
    • alt attribute for alternative text
    • height and width for resizing
  • Folder Organization: Place all images in an images folder
  • Example Code: 
    <img src="images/dog.png" alt="Dog" height="200">
  • Self-Closing Tag: Image tags are self-closing
  • Image Links: Wrap image tags in anchor tags for clickable images

Working with Audio in HTML

  • Audio Tag: <audio> element to embed audio files
  • Attributes:
    • src for source
    • controls for play/pause controls
    • autoplay and loop for additional settings
  • Multiple Formats: Use multiple source formats for broader compatibility

Embedding Videos in HTML

  • Video Tag: <video> element to embed video files
  • Attributes:
    • src for source
    • controls for play/pause controls
    • autoplay, muted, and loop for additional settings
  • Multiple Formats: Use multiple source formats for broader compatibility

Favicon Creation

  • Definition: Small web page icon
  • Supported Formats: .ico, .png, .gif, .jpg, .svg
  • Example Code: 
    <link rel="icon" href="images/favicon.ico">

Text Formatting in HTML

  • Tags for Emphasis:
    • Bold: <b> or <strong>
    • Italic: <i> or <em>
    • Underline: <u>
    • Others: <small>, <mark>, etc.

Span and Div Tags

  • Span: Inline container for styling
  • Div: Block container for styling
  • Example Usage: 
    <div style="background-color:cyan;">Content</div>
<span style="background-color:tomato;">Content</span>

Creating Lists in HTML

  • Unordered Lists: <ul> with <li> items
  • Ordered Lists: <ol> with <li> items
  • Description Lists: <dl> with <dt> terms and <dd> definitions

Creating Tables in HTML

  • Table Tags: <table>, <tr> (row), <th> (header), <td> (data)
  • Example Code: 
    <table>
  <tr><th>Day</th><th>Hours</th></tr>
  <tr><td>Monday</td><td>9-5</td></tr>
</table>
  • Attributes: border, width, height, align

Button Creation in HTML

  • Button Tags: <button> or <input type="button">
  • Executable Actions: Linking to other pages or running JavaScript
  • Example Code: 
    <button onclick="location.href='page2.html';">Click Me</button>

Creating Forms in HTML

  • Form Tags: <form> with action and method attributes
  • Form Elements: <input>, <textarea>, <select>, <option>, <button>
  • Example Code: 
    <form action="submit.php" method="post">
  Name: <input type="text"><br>
  <input type="submit">
</form>

Headers and Footers in HTML

  • Semantic Elements: <header> and <footer> to organize content
  • Example Code: 
    <header>Site Name</header>
<footer>Contact Info &copy; 2023</footer>

Introduction to CSS

  • Definitions and Uses: Apply styles and layouts to HTML elements
  • Three Methods: Inline, Internal, External
  • Example: 
    <style>
  body {background-color:black; color:white;}
</style>

Adding Colors in CSS

  • Methods: Color names, RGB, HEX, HSL
  • Example Code: 
    body {color: tomato;}
.box {background-color: #333333;}

Working with Fonts in CSS

  • Types: System fonts, Google Fonts, custom fonts
  • Font Families: font-family: Arial, sans-serif;
  • Font Sizes: font-size: 16px;

Creating Borders in CSS

  • Border Properties: border-width, border-style, border-color, border-radius
  • Example Code: 
    .box {border: 2px solid red;}

Shadows in CSS

  • Text Shadows: text-shadow: 2px 2px 5px #000;
  • Box Shadows: box-shadow: 2px 2px 5px #000;

Working with Margins in CSS

  • Margin Properties: margin-top, margin-right, margin-bottom, margin-left
  • Shorthand Notation: margin: 10px;
  • Example Code: 
    .box {margin: 10px auto;}

Float Property in CSS

  • Usage: Allows other elements to wrap around floated elements
  • Example Code: 
    .box {float: left;}

Overflow Property in CSS

  • Options: visible, hidden, scroll, auto
  • Example Code: 
    .box {overflow: hidden;}

Display Property in CSS

  • Common Values: block, inline, inline-block, none
  • Example Code: 
    .box {display: inline-block;}
  • Visibility: visibility: hidden; for hiding without removing from the layout

Width and Height in CSS

  • Properties: width, height, min-width, min-height, max-width, max-height
  • Units: px, %, em
  • Example Code: 
    .box {width: 50%; height: 100px;}

Position Property in CSS

  • Types: static, relative, absolute, fixed, sticky
  • Example Code: 
    .box {position: relative; top: 10px; left: 20px;}

Background Images in CSS

  • Background Image: background-image: url('image.jpg');
  • Properties: background-repeat, background-position, background-size

CSS Combinators

  • Types: Descendant ( ), Child (>), Sibling (~), Adjacent Sibling (+)
  • Example Code: 
    ul > li {color: red;}

Pseudo-classes in CSS

  • Types: :hover, :active, :focus, :nth-child(n), :not(selector)
  • Example Code: 
    a:hover {color: red;}

Pseudo-elements in CSS

  • Types: ::before, ::after, ::first-letter, ::first-line, ::selection
  • Example Code: 
    p::first-letter {font-size: 200%; color: red;}
  • Usage: Style parts of elements with certain conditions

Pagination in HTML and CSS

  • Definition: Method to divide document content into discrete pages
  • Example Code: 
    <div class="pagination">
  <a href="#">&laquo;</a>
  <a href="#" class="active">1</a>
  <a href="#">2</a>
  <a href="#">&raquo;</a>
</div>

Creating Dropdown Menus

  • HTML Structure: Use divs for container and content
  • CSS Styling: Use hover effect to show/hide dropdown
  • Example Code: 
    <div class="drop-down">
  <button>Menu</button>
  <div class="content">...</div>
</div>

Navigation Bar Creation

  • Structure & Styling: Unordered list of links, styles for layout
  • Example Code: 
    <nav class="navbar">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>

Website Layouts using CSS

  • Landing Page Structure: Header, Navigation, Main, Footer
  • Example: 
    <header>Site</header>
<nav>Menu</nav>
<main>Content</main>
<footer>Contact</footer>
  • Responsive Design: Media queries for mobile optimization

Image Gallery Creation

  • Steps: Add images, description, and style for gallery
  • Example Code: 
    <div class="gallery">
  <img src="images/pic1.jpg" alt="Pic 1">
  <div class="desc">Description</div>
</div>

Using Icons with Font Awesome

  • Step-by-Step: Register on fontawesome.com, get a kit, include script
  • Example Code: 
    <script src="https://kit.fontawesome.com/yourkitcode.js"></script>
<i class="fa fa-home"></i>
  • Styling: Customize size, color, etc.

Flexbox in CSS

  • Usage: Flex container, flex items
  • Properties: flex-direction, justify-content, align-items
  • Example Code: 
    .container { display: flex; }
.container .item { flex: 1; }

CSS Transformations

  • Usage: Rotate, scale, skew, translate elements
  • Properties: transform: rotate(45deg);
  • Example Code: 
    .box {transform: translate(50px, 100px);}

Animations in CSS

  • Keyframes: Define animation steps
  • Animation Properties: animation-name, duration, timing-function
  • Example Code: 
    @keyframes slide {
  from {left: 0;}
  to {left: 100px;}
}
.box { animation: slide 2s;}