HTML and CSS Basics

Jul 22, 2024

Mindmap

Lecture Notes: HTML and CSS Basics

Introduction

  • Series covers HTML and CSS basics.
  • Importance of learning HTML:
    • Enhances resumes.
    • Businesses have online presence.
    • Useful even if not a web developer.

HTML Basics

Definitions

  • HTML: HyperText Markup Language; uses tags to structure web content.
  • Tags: Used in pairs, e.g., <p></p>, <h1></h1>.

Common Tags

  • Header tags: <h1>, <h2>, etc. used for headings.
  • Paragraph tag: <p> for paragraphs.
  • Anchor tag: <a> for hyperlinks.
  • Line Break: <br> for line breaks.
  • Horizontal Rule: <hr> for a horizontal line.
  • Format tags: <b>, <i>, <u>, etc.
  • Preformatted Text: <pre> preserves spaces and line breaks.
  • Comments: <!-- comment --> not shown in output.

HTML File Structure

  1. DOCTYPE Declaration: <!DOCTYPE html>, indicates HTML5.
  2. HTML tag: <html>, root element.
  3. Head tag: <head>, contains metadata like title.
  4. Body tag: <body>, contains visible content.

Tools Required

  • Web Browsers: Chrome, Firefox, Edge, Safari.
  • Text Editor: VS Code recommended.

Setting Up VS Code

  1. Download from code.visualstudio.com.
  2. Open and install.
  3. Create a primary folder for the website.
  4. Create index.html inside the folder for the homepage.
  5. Install the Live Server extension in VS Code.

Basic HTML Example

<!DOCTYPE html>
<html>
<head>
  <title>My First Website</title>
</head>
<body>
  <h1>This is an H1 heading</h1>
  <p>Some paragraph text.</p>
  <a href="https://example.com">Link</a>
</body>
</html>

CSS Basics

Definition

  • CSS: Cascading Style Sheets; used for styling the web pages.

Linking CSS

  1. Inline: Using the style attribute in HTML tags.
  2. Internal: Inside <style> tags in the HTML <head>.
  3. External: Link to a .css file using <link> in the HTML <head>.

Example of CSS

Internal CSS

<head>
  <style>
    body { background-color: lightblue; }
    h1 { color: navy; }
    p { font-family: verdana; color: green; }
  </style>
</head>

External CSS

  • HTML:
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
  • CSS (styles.css):
body { background-color: lightblue; }
h1 { color: navy; }
p { font-family: verdana; color: green; }

Basic Styling

  • Colors: Use named colors, hex codes, RGB, HSL values.
  • Text alignment: text-align: center;.
  • Padding and Margin: Defines space around elements.
  • Borders: Style borders using border property.

Advanced CSS Concepts

Selectors

  • Class Selector: .classname {}
  • ID Selector: #idname {}
  • Attribute Selector: a[href='link'] {}

Pseudo-Classes and Pseudo-Elements

  • Pseudo-Classes: :hover, :active, :nth-child(n).
  • Pseudo-Elements: ::before, ::after, ::first-letter.

CSS Layouts

  • Flexbox: Align elements using display: flex;.
  • Grid: Layout systems for arranging elements.

Media Queries

  • Used for responsive design.
  • Example:
@media only screen and (max-width: 600px) {
  .classname {
    width: 100%;
  }
}

Project Examples

Image Gallery

<div class="gallery">
  <a target="_blank" href="img_1.png">
    <img src="img_1.png" alt="Image 1" width="600" height="400">
  </a>
  <div class="desc">Description</div>
</div>

Navigation Bar

<nav class="navbar">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#services">Services</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

Visual Enhancements

Animations and Transitions

  • Define using @keyframes.
  • Example:
@keyframes slidein {
  from { margin-left: 100%; }
  to { margin-left: 0%; }
}
  • Apply animation:
#slideelem {
  animation-duration: 3s;
  animation-name: slidein;
}

Using Font Awesome

  1. Link Font Awesome in <head>.
  2. Use icons:
<i class="fas fa-home"></i>

Conclusion

  • HTML provides structure; CSS provides styling.
  • Practice with real projects to understand both.
  • Utilize tools like VS Code, Live Server, and browser developer tools.

Stay tuned for more advanced topics!