FNB App Academy Week 1 Notes Summary
Week 1 Summary
Introduction to Html:
HTML (HyperText Markup Language) is the standard markup language used to create web pages. It provides the structure and content of a webpage, allowing browsers to render and display the page.
Key aspects of HTML:
1. Tags: HTML uses tags to define elements, such as headings, paragraphs, images, and links.
2. Elements: HTML elements are represented by tags and provide structure and meaning to content.
3. Attributes: Attributes provide additional information about elements, such as styles, links, or behaviors.
HTML is the foundation of web development, working alongside CSS (for styling) and JavaScript (for interactivity).
Some basic HTML elements include:
– Headings (h1-h6)
– Paragraphs (p)
– Links (a)
– Images (img)
– Lists (ul, ol, li)
HTML is a fundamental skill for web development, and understanding its basics is essential for building websites and web applications.
Let’s start with a basic HTML structure. Here’s a simple example:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
Let’s break it down:
1. <!DOCTYPE html>: Declares the document type as HTML5.
2. <html>: The root element of the HTML document.
3. <head>: Contains metadata about the document, like the title.
4. <title>: Sets the title of the page, shown in the browser’s title bar.
5. <body>: Contains the content of the HTML document.
6. <h1>: A heading element, displaying large text.
7. <p>: A paragraph element, displaying regular text.
Save this code in a file with a .html extension (e.g., index.html) and open it in a web browser to see the result!
To insert an image in HTML, use the <img> tag. Here’s a basic example:
<img src=”image_url” alt=”image_description”>
– src attribute specifies the image URL or path.
– alt attribute provides alternative text for accessibility and when the image can’t be loaded.
Example with a specific image URL:
<img src=”https://example.com/image.jpg” alt=”A beautiful sunset”>
Make sure to replace “image_url” with the actual URL or path to your image.
To organize your project, you can create a folder specifically for images. Here’s a common practice:
1. Create a new folder named images (or img) in your project directory.
2. Move your image files (e.g., .jpg, .png, .gif) into this folder.
When referencing images in your HTML, use the folder path:
<img src=”images/image_name.jpg” alt=”Image description”>
Or, if your image is in a subfolder within images:
<img src=”images/subfolder/image_name.jpg” alt=”Image description”>
This helps keep your project organized and makes it easier to manage your files.
Hyperlinks are created using the <a> tag. Here’s a basic example:
<a href=”https://www.example.com”>Visit Example</a>
– href attribute specifies the link URL.
– The text between <a> and </a> is the clickable link text.
You can link to:
1. External websites (like above)
2. Internal pages (e.g., <a href=”about.html”>About</a>)
3. Email addresses (e.g., <a href=”mailto:user@example.com”>Email</a>)
4. Phone numbers (e.g., <a href=”tel:+1234567890″>Call</a>)
You can also add attributes like:
– target=”_blank” to open the link in a new tab/window
– title=”Link description” for a tooltip
Example:
<a href=”https://www.example.com” target=”_blank” title=”Visit Example website”>Visit Example</a>