From 00f474594882f6646304e629ce98d431201ecd55 Mon Sep 17 00:00:00 2001 From: Sydney Brown Date: Fri, 14 Jun 2024 09:28:00 -0700 Subject: [PATCH 1/2] html basics --- study-guides/html-basics.md | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/study-guides/html-basics.md b/study-guides/html-basics.md index 9d3d9b2..b93cb9f 100644 --- a/study-guides/html-basics.md +++ b/study-guides/html-basics.md @@ -1 +1,36 @@ # HTML Basics + +## Introducing the `div` element + +The `div`, or content division element, is used to define sections or divisions of content on the webpage. When using these elements you may not see a difference from the user-view but it helps organize groups of elements within the html page. + +**_But why is it necessary to organize your html elements?_** + +There are many reasons why developers might use the `div` element in their code. Some of which may include: + +- **Creating more readable code.** Using the `div` element makes it easier for code reviewers to see defined sections to help identify bugs, or isolate features to sections on the website. +- **For styling!** By creating defined sections, it allows developers to add custom styling to each section of their website. This is perhaps one of the most common reasons developers use `div` tags. + +### Linking CSS Files + +**Line 6** `` connects the CSS style sheet to our HTML file. + +Let’s break down the syntax used to do this action. Learn more on the [MDN Web Docs about the `link` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link). + +- ``: This element specifies relationships between the current document (the HTML file) and an external resource (the CSS file). +- `href`: This attribute specifies the file path, or location, of our external resource. In this particular example, the CSS file is named `style.css` but you can name your stylesheet anything. Take note that the file path is surrounded by double quotes, `""`. +- `rel`: `rel` stands for relationship. This lets the document know how the resource will interact with the current document + +, in this case we are linking to a `stylesheet`. Learn more on the MDN Web Docs about link types. +- `type`: Similar to the `rel` attribute, the `type` attribute lets the document know the specific type of file that is being linked. + +### Linking JavaScript Files + +**Line 9** `` links the JavaScript file to our HTML file. + +Let’s break down the syntax used to do this action. + +- ` + + +``` + +In HTML, we denote an element by specifying the name of the element in opening brackets `<>` and closing brackets ``. Let’s take the time to highlight the structure of an HTML file and some important elements presented in the boilerplate above.