ImAlpha/OdinProject
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

html first file added

Browse Source
This commit is contained in:
Jacob Delgado 2023-04-03 01:39:25 -07:00
parent 75e104823e
commit 120275164b
2 changed files with 45 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
TheOdinProjectNotes.md
View File

@ -88,4 +88,44 @@ git remote set-url origin https://'username':'password'@repositorylink
- Controls Positioning of text and font
- HTML and CSS are ***not*** programming languages, technically speaking because they only present information and are not used to compute any logic
- JavaScript would be a programming language that leverages both HTML and CSS
-
### [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) and Tags
- HTML defines the structure and content of webpages.
- HTML elements are used to create:
- paragraphs
- headings
- lists
- images
- links
- Elements are simply pieces of content wrapped in opening and closing tags
- Another way to define them is *containers for content*
- Paragraph is `<p> </p>`
- Some tags do not require a closing tag
- line break is `<br>` or `<br />`
- image insert would be `<img />` or `<img>`
- There many tags, looking at documentation for most of them is standard [HTML Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
- [Intro to HTML Video 3:42](https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-&ab_channel=KevinPowell)
### HTML Boilerplate
- All HTML docs have the same basic structure that needs to be in place before anything useful can be done.
- [index.html](/OdinProject/html-boilerplate/index.html)
#### The DOCTYPE
- Every HTML page starts with a doctype declaration
- The purpose of it is to tell the browser what version of HTML it should use to render the document(current being HTML5)
- HTML5 Doctype is `<!DOCTYPE html>`
- The doctypes for older version of HTML were more complicated
- Example of doctype for HTML4
```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
```
#### HTML Element
- Now we need to provide an `<html>` element. More commonly known as the *root element* of the document
- root means that every other element in the document will be a descendant of that one
- The `lang` attribute specifies the language of the text content in that element
- primarily used for improving accessibility of the webpage
- `en` is used for English
- The `<head>` element is where important meta-information about our webpages and items required for our webpages to render correctly in the browser
- inside of the `<head>` element, there should not be any element that displays content on the webpage
#### The Charset Meta Element
- The meta tag for the charset encoding of the webpage in the head element: `<meta charset="utf-8">`
- The encoding ensures that the webpage will display special symbols and characters from different languages correctly in the browser
#### Title Element
-

4
html-boilerplate/index.html Normal file
View File

@ -0,0 +1,4 @@
<!DOCTYPE>
<html lang="en">
</html>