Introduction to Web Development and HTML Basics
From the https://class.lingco.io/courses/159084/module_items/13073678?share=true curriculum
Introduction to Web Development and HTML Basics
TL;DR
Web development is all about creating websites and web applications that you access through a browser. HTML is the fundamental language for structuring content on the web, telling the browser what's a heading, a paragraph, an image, and so on. You'll use HTML to build the "skeleton" of your web pages.
1. The Mental Model
Think of a web page like a house. HTML is the blueprints and the main structural pieces – the walls, doors, and windows. It defines what goes where.
2. The Core Material
Web development generally involves two main parts: the front-end and the back-end.
What is Front-End Development?
Photo by Pixabay on Pexels
Front-end development is everything you see and interact with directly in your web browser. This includes the layout, colors, fonts, images, and any buttons or forms. It's about making a website look good and be easy to use. The main languages used here are HTML, CSS, and JavaScript.
What is Back-End Development?
Photo by Nemuel Sereti on Pexels
Back-end development deals with the "behind-the-scenes" stuff that users don't directly see. This includes servers, databases, and application logic. It handles things like storing user data, processing requests, and sending the right information back to the front-end. Common back-end languages include Python, Node.js, Ruby, and PHP.
You'll often hear about full-stack development, which means working with both front-end and back-end parts of a web application.
Understanding HTML
Photo by Pixabay on Pexels
HTML, which stands for HyperText Markup Language, is the standard language for creating web pages. It uses a system of "tags" to mark up different parts of your content, giving them meaning and structure.
Here's how HTML works:
- Elements: An HTML element typically consists of an opening tag, content, and a closing tag. For example,
<p>This is a paragraph.</p>. - Tags: Tags are keywords enclosed in angle brackets, like
<p>for paragraph or<h1>for a main heading. - Attributes: Attributes provide additional information about an HTML element. They are placed inside the opening tag and usually come in key-value pairs, like
<img src="image.jpg" alt="Description">.srcandaltare attributes here. - Document Structure: Every HTML document has a basic structure:
<!DOCTYPE html>,<html>,<head>, and<body>.<!DOCTYPE html>: Tells the browser which version of HTML you're using (latest HTML5).<html>: The root element that wraps all content on the page.<head>: Contains meta-information about the page, like the title you see in the browser tab, links to stylesheets, and character set. This content isn't directly visible on the page.<body>: Contains all the visible content of the web page, such as text, images, links, and more.
Here's a diagram showing the basic structure of an HTML document:
graph TD
A["Web Development"] --> B["Front-End"]
A --> C["Back-End"]
B --> D["HTML (Structure)"]
B --> E["CSS (Style)"]
B --> F["JavaScript (Interactivity)"]
C --> G["Servers"]
C --> H["Databases"]
C --> I["Application Logic"]
D --> J["HTML Document Structure"]
J --> K["<!DOCTYPE html>"]
J --> L["<html>"]
L --> M["<head>"]
L --> N["<body>"]
M --> O["<title>"]
N --> P["Visible Content (e.g., <p>, <h1>, <img>)"]
Common HTML Tags
Photo by Digital Buggu on Pexels
You'll use these tags all the time:
<h1>to<h6>: Headings (from largest to smallest).<p>: Paragraphs of text.<a>: Links (anchors). Use thehrefattribute to specify the destination:<a href="https://example.com">Visit Example</a>.<img>: Images. Requiressrc(source file) andalt(alternative text for accessibility) attributes:<img src="cat.jpg" alt="A cute cat">.<ul>and<ol>: Unordered (bullet points) and ordered (numbered) lists.<li>: List item, used inside<ul>or<ol>.
<div>and<span>: Generic container elements.<div>is a block-level element (starts on a new line).<span>is an inline element (stays on the same line as surrounding text).
3. Worked Example
Let's create a simple HTML file to see these concepts in action. Save this code as my-first-page.html and open it in your web browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Awesome Page!</h1>
<p>This is a paragraph of text. It explains what this page is about.</p>
<p>Here's a link to learn more about HTML: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank">MDN HTML Docs</a>.</p>
<h2>What I'm Learning</h2>
<ul>
<li>HTML Basics</li>
<li>Structuring Content</li>
<li>Using Tags and Attributes</li>
</ul>
<h3>An Image Example</h3>
<img src="https://via.placeholder.com/150" alt="Placeholder image for demonstration">
<p>You can see how an image and a list are displayed.</p>
</body>
</html>
When you open my-first-page.html in your browser, you'll see:
* "My First Web Page" in the browser tab.
* A large "Welcome to My Awesome Page!" heading.
* Two paragraphs of text, one with a clickable link.
* A smaller heading "What I'm Learning" followed by a bulleted list.
* An even smaller heading "An Image Example" followed by a square placeholder image.
* Another paragraph below the image.
This shows how HTML tags structure the page's visible content.
4. Key Takeaways
- Web development involves front-end (what users see) and back-end (behind-the-scenes logic).
- HTML is the foundation for web pages, providing structure to your content using tags.
- Every HTML document has a basic structure:
<!DOCTYPE html>,<html>,<head>, and<body>. - The
<head>section holds meta-info (like the page title), while the<body>holds visible content. - HTML elements consist of an opening tag, content, and a closing tag (e.g.,
<p>...</p>). - Attributes within opening tags provide extra details about an element (e.g.,
srcfor images,hreffor links). - Common tags like
<h1>to<h6>for headings,<p>for paragraphs,<a>for links, and<img>for images are essential.
Common Mistakes to Avoid
- Forgetting closing tags (e.g.,
<p>Helloinstead of<p>Hello</p>), which can mess up your page layout. - Putting visible content inside the
<head>section instead of the<body>. - Not including the
altattribute for<img>tags, hurting accessibility and SEO. - Mixing up block-level elements (like
div,p,h1) and inline elements (likespan,a,img) without understanding their behavior.
5. Now Try It
Create a new HTML file called my-bio.html. Inside it, put your name as an <h1> heading, a short paragraph <p> about yourself, and then an unordered list <ul> of your favorite hobbies using <li> tags. Finally, add a link <a> to your favorite website with the text "My Favorite Site". Open your file in a browser to see your personal web page.
Frequently asked about Introduction to Web Development and HTML Basics
Study this next
Get the full https://class.lingco.io/courses/159084/module_items/13073678?share=true curriculum
Clone the complete plan to your dashboard for unlimited AI-generated notes, practice quizzes, and a personalised revision schedule.
Create Free Account