From 7e72dd8d11916e36b3efc031ef15dee31d832aca Mon Sep 17 00:00:00 2001 From: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com> Date: Mon, 24 Feb 2025 07:00:13 -0800 Subject: [PATCH] chore(curriculum): adding missing information to basic HTML review page (#58723) Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com> --- .../67072fc183c7ca6c588feb4d.md | 461 +++++++++++++++++- 1 file changed, 436 insertions(+), 25 deletions(-) diff --git a/curriculum/challenges/english/25-front-end-development/review-basic-html/67072fc183c7ca6c588feb4d.md b/curriculum/challenges/english/25-front-end-development/review-basic-html/67072fc183c7ca6c588feb4d.md index 58457f6c533..45e045dfcbe 100644 --- a/curriculum/challenges/english/25-front-end-development/review-basic-html/67072fc183c7ca6c588feb4d.md +++ b/curriculum/challenges/english/25-front-end-development/review-basic-html/67072fc183c7ca6c588feb4d.md @@ -11,51 +11,462 @@ Review the concepts below to prepare for the upcoming quiz. ## HTML Basics -- **Role of HTML**: Foundation of web structure. -- **HTML Elements**: Used to represent content on the page. Most of them are made by an opening and a closing tag (e.g., `

`, `

`). -- **`div` elements**: The `div` element is a generic HTML element that does not hold any semantic meaning. It is used as a generic container to hold over HTML elements. -- **Void Elements**: Do not have a closing tag (e.g., ``). -- **Attributes**: Adding metadata and behavior to elements. +- **Role of HTML**: HTML represents the content and structure of the web page. +- **HTML Elements**: Elements are the building blocks for an HTML document. They represent headings, paragraphs, links, images and more. Most HTML elements consist of an opening tag (``) and a closing tag (``). + +Here is the basic syntax: + +```html +Content goes here +``` + +- **Void Elements**: Void elements cannot have any content and only have a start tag. Examples include `img` and `meta` elements. + +```html + + +``` + +It is common to see some codebases that include a forward slash `/` inside the void element. Both of these are acceptable: + +```html + + +``` + +- **Attributes**: An attribute is a value placed inside the opening tag of an HTML element. Attributes provide additional information about the element or specify how the element should behave. Here is the basic syntax for an attribute: + +```html + +``` + +A boolean attribute is an attribute that can either be present or absent in an HTML tag. If present, the value is true otherwise it is false. Examples of boolean attributes include `disabled`, `readonly`, and `required`. + +- **Comments**: Comments are used in programming to leave notes for yourself and other developers in your code. Here is the syntax for a comment in HTML: + +```html + +``` + +## Common HTML elements + +- **Heading Elements**: There are six heading elements in HTML. The `h1` through `h6` heading elements are used to signify the importance of content below them. The lower the number, the higher the importance, so `h2` elements have less importance than `h1` elements. + +```html +

most important heading element

+

second most important heading element

+

third most important heading element

+

fourth most important heading element

+
fifth most important heading element
+
least important heading element
+``` + +- **Paragraph Elements**: This is used for paragraphs on a web page. + +```html +

This is a paragraph element.

+``` + +- **`img` Elements**: The `img` element is used to add images to the web page. The `src` attribute is used to specify the location for that image. For image elements, it's good practice to include another attribute called the `alt` attribute. Here's an example of an `img` element with the `src` and `alt` attributes: + +```html +A slice of lasagna on a plate. +``` + +- **`body` Element**: This element is used to represent the content for the HTML document. + +```html + +

CatPhotoApp

+

This is a paragraph element.

+ +``` + +- **`section` Elements**: This element is used to divide up content into smaller sections. + +```html +
+

About Me

+

Hi, I am Jane Doe and I am a web developer.

+
+``` + +- **`div` Elements**: This element is a generic HTML element that does not hold any semantic meaning. It is used as a generic container to hold other HTML elements. + +```html +
+

I am a heading

+

I am a paragraph

+
+``` + +- **Anchor (`a`) Elements**: These elements are used to apply links to a web page. The `href` attribute is used to specify where the link should go when the user clicks on it. + +```html +cute cats +``` + +- **Unordered (`ul`) and Ordered (`ol`) List Elements**: To create a bulleted list of items you should use the `ul` element with one or more `li` elements nested inside like this: + +```html + +``` + +To create an ordered list of items you should use the `ol` element: + +```html +
    +
  1. flea treatment
    2. +
  2. thunder
    3. +
  3. other cats
    4. +
+``` + +- **Emphasis (`em`) Element**: This is used to place emphasis on a piece of text. + +```html +

Cats love lasagna.

+``` + +- **Strong Importance (`strong`) Element**: This element is used to place strong emphasis on text to indicate a sense of urgency and seriousness. + +```html +

+ Important: Before proceeding, make sure to wear your safety goggles. +

+``` + +- **`figure` and `figcaption` Elements**: The `figure` element is used to group content like images and diagrams. The `figcaption` element is used to represent a caption for that content inside the `figure` element. + +```html +
+ Five cats looking around a field. +
Cats hate other cats.
+
+``` + +- **`main` Element**: This element is used to represent the main content for a web page. +- **`footer` Element**: This element is placed at the bottom of the HTML document and usually contains copyright information and other important page links. + +```html + +``` ## Identifiers and Grouping -- **IDs**: Unique element identifiers. -- **Classes**: Grouping elements for styling and behavior. +- **IDs**: Unique element identifiers for HTML elements. ID names should only be used once per HTML document. + +```html +

Movie Review Page

+``` + +ID names cannot have spaces. If your ID name contains multiple words then you can use dashes between the words like this: + +```html +
+``` + +- **Classes**: Classes are used to group elements for styling and behavior. + +```html +
+``` + +Unlike IDs, you can reuse the same class name throughout the HTML document. The `class` value can also have spaces like this: + +```html +
+
+``` ## Special Characters and Linking -- **HTML entities**: Using special characters like `&` and `<`. -- **`link` element**: Linking to external stylesheets. -- **`script` element**: Embedding external JavaScript files. +- **HTML entities**: An HTML entity, or character reference, is a set of characters used to represent a reserved character in HTML. Examples include the ampersand (`&`) symbol and the less than symbol (`<`). + +```html +

This is an <img /> element

+``` + +- **`link` Element**: This element is used to link to external resources like stylesheets and site icons. Here is the basic syntax for using the `link` element for an external CSS file: + +```html + +``` + +The `rel` attribute is used to specify the relationship between the linked resource and the HTML document. The `href` attribute is used to specify the location of the URL for the external resource. + +- **`script` Element**: This element is used to embed executable code. + +```html + + + +``` + +While you can technically write all of your JavaScript code inside the `script` tags, it is considered best practice to link to an external JavaScript file instead. Here is an example of using the `script` element to link to an external JavaScript file: + +```html + +``` + +The `src` attribute is used here to specify the location for that external JavaScript file. ## Boilerplate and Encoding -- **HTML boilerplate**: Basic structure of a webpage, which includes the `DOCTYPE`, `html`, `head`, and `body` elements. It should be used as the starting point for an HTML document. -- **UTF-8 character encoding**: Ensuring universal character display. +- **HTML boilerplate**: This is a boilerplate that includes the basic structure and essential elements every HTML document needs. + +```html + + + + + freeCodeCamp + + + + + + +``` + +- **`DOCTYPE`**: This is used to tell browsers which version of HTML you're using. +- **`html` Element**: This represents the top level element or the root of an HTML document. To specify the language for the document, you should use the `lang` attribute. +- **`head` Element**: The `head` section contains important meta data which is behind-the-scenes information needed for browsers and search engines. +- **`meta` Elements**: These elements represent your site's metadata. These element have details about things like character encoding, and how websites like Twitter should preview your page's link and more. +- **`title` Element**: This element is used to set the text that appears in the browser tab or window. +- **UTF-8 character encoding**: UTF-8, or UCS Transformation Format 8, is a standardized character encoding widely used on the web. Character encoding is the method computers use to store characters as data. The `charset` attribute is used inside of a `meta` element to set the character encoding to UTF-8. ## SEO and Social Sharing -- **Meta tags (`description`)**: Providing a short description for the web page and impacting SEO. -- **Open Graph tags**: Enhancing social media sharing. +- **SEO**: Search Engine Optimization is a practice that optimizes web pages so they become more visible and rank higher on search engines. +- **Meta (`description`) Element**: This is used to provide a short description for the web page and impacting SEO. + +```html + +``` + +- **Open Graph tags**: The open graph protocol enables you to control how your website's content appears across various social media platforms, such as Facebook, LinkedIn, and many more. +By setting these open graph properties, you can entice users to want to click and engage with your content. +You can set these properties through a collection of `meta` elements inside your HTML `head` section. +- **`og:title` Property**: This is used to set the title that displays for social media posts. + +```html + +``` + +- **`og:type` Property**: The `type` property is used to represent the type of content being shared on social media. Examples of this content include articles, websites, videos, or music. + +```html + +``` + +- **`og:image` Property**: This is used to set the image shown for social media posts. + +```html + +``` + +- **`og:url` Property**: This is used to set the URL that users will click on for the social media posts. + +```html + +``` ## Media Elements and Optimization -- **Replaced elements**: Embedded content (e.g., images, iframes). -- **Optimizing media**: Techniques to improve media performance. -- **Image formats and licenses**: Understanding usage rights and types. -- **SVGs**: Scalable vector graphics for sharp visuals. +- **Replaced elements**: A replaced element is an element whose content is determined by an external resource rather than by CSS itself. An example would be an `iframe` element. `iframe` stands for inline frame. It's an inline element used to embed other HTML content directly within the HTML page. + +```html + +``` + +You can include the `allowfullscreen` attribute which allows the user to display the iframe in full screen mode. + +```html + +``` + +To embed a video within an `iframe` you can copy it directly from popular video services like YouTube and Vimeo, or define it yourself with the `src` attribute pointing to the URL of that video. Here's an example of embedding a popular freeCodeCamp course from YouTube: + +```html +

A freeCodeCamp YouTube Video Embedded with the iframe Element

+ + +``` + +There are some other replaced elements, such as `video`, and `embed`. And some elements behave as replaced elements under specific circumstances. Here's an example of an `input` element with the `type` attribute set to `image`: + +```html + +``` + +- **Optimizing media**: There are three tools to consider when using media, such as images, on your web pages: the size, the format, and the compression. A compression algorithm is used to reduce the size for files or data. +- **Image formats**: Two of the most common file formats are PNG and JPG, but these are no longer the most ideal formats for serving images. Unless you need support for older browsers, you should consider using a more optimized format, like WEBP or AVIF. +- **Image licenses**: An image under the public domain has no copyright attached to it and is free to be used without any restrictions. Images licensed specifically under the Creative Commons 0 license are considered public domain. Some images might be released under a permissive license, like a Creative Commons license, or the BSD license that freeCodeCamp uses. +- **SVGs**: Scalable Vector Graphics track data based on paths and equations to plot points, lines, and curves. What this really means is that a vector graphic, like an SVG, can be scaled to any size without impacting the quality. ## Multimedia Integration -- **HTML audio and video elements**: Embedding multimedia. -- **Embedding with `