From 120275164bbc9466d4da1011af255fa1f69646a5 Mon Sep 17 00:00:00 2001 From: ImAlpha Date: Mon, 3 Apr 2023 01:39:25 -0700 Subject: [PATCH] html first file added --- TheOdinProjectNotes.md | 42 ++++++++++++++++++++++++++++++++++++- html-boilerplate/index.html | 4 ++++ 2 files changed, 45 insertions(+), 1 deletion(-) create mode 100644 html-boilerplate/index.html diff --git a/TheOdinProjectNotes.md b/TheOdinProjectNotes.md index 70afd87..1f577fa 100644 --- a/TheOdinProjectNotes.md +++ b/TheOdinProjectNotes.md @@ -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 -- \ No newline at end of file +### [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 `

` + - Some tags do not require a closing tag + - line break is `
` or `
` + - image insert would be `` or `` +- 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 `` +- The doctypes for older version of HTML were more complicated +- Example of doctype for HTML4 +``` + +``` +#### HTML Element +- Now we need to provide an `` 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 `` element is where important meta-information about our webpages and items required for our webpages to render correctly in the browser + - inside of the `` 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: `` + - The encoding ensures that the webpage will display special symbols and characters from different languages correctly in the browser +#### Title Element + - \ No newline at end of file diff --git a/html-boilerplate/index.html b/html-boilerplate/index.html new file mode 100644 index 0000000..4053cc5 --- /dev/null +++ b/html-boilerplate/index.html @@ -0,0 +1,4 @@ + + + + \ No newline at end of file