Introduction To Websites And HTML

Understanding Websites: A Beginner’s Guide

A website is a collection of web pages that are stored on the internet and can be accessed using a web browser (like Google Chrome, Safari, or Firefox).

Websites can contain text, images, videos, and interactive elements to provide information, services, or entertainment.

1. How Websites Work

Websites work by following these simple steps:

1. A user types a website address (URL) – This is the address you enter in the browser, like www.google.com.

2. The browser sends a request to a web server – A web server is a special computer that stores website files.

3. The server responds with website files – These files include HTML, CSS, JavaScript, images, and other resources.

4. The browser processes and displays the website – The web browser reads the files and shows the website in a visually organized way.

2. Types of Websites

Websites come in different types, depending on their purpose:

A. Static Websites

• These websites display the same content for every visitor.

• Examples: Personal blogs, portfolios, basic business websites.

• Technologies: HTML, CSS (for styling), and sometimes JavaScript.

B. Dynamic Websites

• These websites change content dynamically based on user interaction or data.

• Examples: Social media sites, e-commerce stores, and online banking.

• Technologies: Databases, Programming Languages (like PHP, Python, or JavaScript with Node.js), and CMS (Content Management Systems) like WordPress.

3. Basic Website Components

A website is made up of different parts:

A. Frontend (What users see)

This is the visual part of the website that users interact with.

• HTML (HyperText Markup Language) – The structure of the webpage.

• CSS (Cascading Style Sheets) – The styling and layout (colors, fonts, spacing).

• JavaScript – Makes websites interactive (like buttons, animations, pop-ups).

B. Backend (How websites work behind the scenes)

The backend is where the website processes user requests and stores data.

• Server – The computer that stores the website and processes requests.

• Database – Stores user information, like login details, product listings, and more.

• Backend languages – PHP, Python, Node.js, Ruby, etc., used to manage the data and logic.

4. Domain Names and Hosting

To make a website available online, you need two things:

1. Domain Name – This is the website address (e.g., www.example.com).

2. Web Hosting – This is the server that stores website files and makes them accessible.

Popular domain providers: GoDaddy, Namecheap, Google Domains

Popular hosting providers: Bluehost, Hostinger, AWS, DigitalOcean

5. Website Development vs. Website Design

• Website Design – Focuses on the look and feel (UI/UX).

• Website Development – Focuses on building the website using coding.

6. Creating Your First Website

If you’re a beginner, you can create a simple website using:

• No-code tools: Wix, Squarespace, WordPress.

• Code: Learn HTML, CSS, and JavaScript for more control.

HTML (HyperText Markup Language) - A Beginner’s Guide

HTML (HyperText Markup Language) is the foundation of any website. It is used to structure web pages by defining elements like headings, paragraphs, images, links, tables, and more.

1. Basic Structure of an HTML Document

Every HTML document follows a basic structure. Below is a simple example of an HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Website</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is my first web page.</p>
</body>
</html>

Explanation of the Structure

• <!DOCTYPE html> → Declares that this is an HTML5 document.

• <html lang="en"> → The root element; defines the document language (English in this case).

• <head> → Contains meta information about the document (not visible on the page).

• <meta charset="UTF-8"> → Defines character encoding.

• <meta name="viewport" content="width=device-width, initial-scale=1.0"> → Makes the website mobile-responsive.

• <title> → Defines the page title (shown in the browser tab).

• <body> → Contains the visible content of the webpage.

2. Common HTML Elements

HTML consists of various elements, each with a specific purpose.

A. Headings

HTML has six heading levels:

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Section Title</h3>
<h4>Subsection</h4>
<h5>Smaller Title</h5>
<h6>Smallest Title</h6>

• <h1> is the largest and <h6> is the smallest.

B. Paragraphs and Text Formatting

<p>This is a paragraph.</p>
<b>Bold text</b>
<strong>Important text</strong>
<i>Italic text</i>
<em>Emphasized text</em>
<u>Underlined text</u>
<mark>Highlighted text</mark>
<small>Small text</small>
<del>Strikethrough text</del>
<blockquote>This is a blockquote.</blockquote>

• <p> → Creates a paragraph.

• <b> and <strong> → Bold text (strong is used for emphasis).

• <i> and <em> → Italic text (em is used for emphasis).

• <u> → Underlines text.

• <mark> → Highlights text.

• <small> → Makes text smaller.

• <del> → Strikes through text.

• <blockquote> → Used for quoting a large block of text.

C. Links (Hyperlinks)

Links allow navigation to other pages.

<a href="https://www.example.com">Visit Example</a>

• <a> (Anchor tag) creates links.

• href (Hyperlink Reference) specifies the destination URL.

Opening a Link in a New Tab

<a href="https://www.example.com" target="_blank">Open in New Tab</a>

• target="_blank" makes the link open in a new tab.

D. Images

Adding images to a webpage:

<img src="image.jpg" alt="Description of Image">

• src → Specifies the image source (file path or URL).

• alt → Alternative text for accessibility and SEO.

Resizing an Image

<img src="image.jpg" alt="Description" width="300" height="200">

E. Lists

Ordered List (Numbered)

<ol>
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ol>

Unordered List (Bulleted)

<ul>
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
</ul>

Definition List

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

F. Tables

Tables organize data in rows and columns.

<table border="1">
    <thead>
      <tr>
        <th scope="col">Items</th>
        <th scope="col">Expenditure</th>
      </tr>
    </thead>
    <tbody>
      <tr>
          <td>Alice</td>
          <td>10</td>
      </tr>
      <tr>
          <td>John</td>
          <td>25</td>
      </tr>
    </tbody>
</table>

• <table> → Defines a table.

• <thead> → Table header.

• <tbody> → Table body.

• <tr> → Table row.

• <th> → Table heading (bold).

• <td> → Table data cell.

G. Forms

Forms are used for user input.

<form action="submit.php" method="POST">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email">

    <label for="message">Message:</label>
    <textarea id="message" name="message"></textarea>

    <button type="submit">Submit</button>
</form>

• <form> → Creates a form.

• action → Where to send form data.

• method="POST" → Sends data securely (use GET for URLs).

• <input> → Accepts user input (text, email, password, etc.).

• <textarea> → Multi-line text input.

• <button> → Clickable button.

H. Semantic HTML (Better Structure)

Semantic elements improve readability and SEO:

<header>Website Header</header>
<nav>Navigation Links</nav>
<main>Main Content</main>
<section>Section of Content</section>
<article>Blog Post</article>
<aside>Sidebar</aside>
<footer>Footer Content</footer>

I. HTML Comments

HTML comments are used to add notes or explanations within the code that do not appear on the webpage. They are useful for documenting code, temporarily disabling code, and making the code more readable.

1. Syntax of HTML Comments

<!-- This is a comment -->

• Opening tag: <!--

• Closing tag: -->

• Everything between these tags is ignored by the browser.

3. Advanced HTML Concepts

A. HTML Entities

Used to display special characters:

&lt; → <  
&gt; → >  
&amp; → &  
&quot; → "  
&apos; → '  
&nbsp; → (Space)

B. Adding Multimedia (Audio & Video)

<audio controls>
    <source src="audio.mp3" type="audio/mp3">
</audio>

<video controls width="400">
    <source src="video.mp4" type="video/mp4">
</video>

C. Embedding Content

Embed YouTube videos, Google Maps, etc.

<iframe width="560" height="315" src="https://www.youtube.com/embed/example"></iframe>

4. Best Practices for Writing HTML

1. Use semantic elements (<header>, <footer>, etc.).

2. Use alt attributes for images for accessibility.

3. Use proper indentation for readability.

Week 1 - Intro To Websites & HTML

Learn What Websites Are and How You Can Create One