From dac6f4b5d877a457d1cbbec065fbfe10bc4690ab Mon Sep 17 00:00:00 2001 From: Micah Godbolt Date: Wed, 27 Feb 2019 20:49:10 -0800 Subject: [PATCH] updating html readme --- step1-01/html-demo/README.md | 39 +++++++++++++++++++++++++++--------- 1 file changed, 30 insertions(+), 9 deletions(-) diff --git a/step1-01/html-demo/README.md b/step1-01/html-demo/README.md index 77a3b4a..3fa05a0 100644 --- a/step1-01/html-demo/README.md +++ b/step1-01/html-demo/README.md @@ -1,10 +1,31 @@ -## HTML Demo +# HTML Demo + +HTML tags are the basis of all web applications. They give the page structure, and define the content within. + +An HTML tag takes the following form: + +```html + +``` + +HTML tags can also be nested to create a tree that we call the [Document Object Model](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) + +```html +
+

My Page

+ +
+``` The [HTML demo page](https://microsoft.github.io/frontend-bootcamp/step1-01/html-demo/html-demo.html) is a large collection of HTML elements that you will come across during development. The full list of elements can be found on [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element). To learn more about each element, click on the element names below. -### [Document Metadata](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Document_metadata) +## [Document Metadata](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Document_metadata) - [`html`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html) - Root-level element - [`head`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head) - Provides general information (metadata) about the page @@ -12,7 +33,7 @@ To learn more about each element, click on the element names below. - [`link`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) - Links to external resources (usually stylesheets) - [`style`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) - Inline style tag -### [Content Sectioning](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Content_sectioning) +## [Content Sectioning](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Content_sectioning) - [`section`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section) - Generic section of content - [`header`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header) - Introductory content or navigational aid @@ -23,7 +44,7 @@ To learn more about each element, click on the element names below. - [`aside`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside) - Related information - [`h1`,`h2`,`h3`,`h4`,`h5`,`h6`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) - Section headings -### [Block Text Content](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Text_content) +## [Block Text Content](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Text_content) - [`div`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div) - Generic block level container - [`p`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p) - Paragraph @@ -32,7 +53,7 @@ To learn more about each element, click on the element names below. - [`li`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) - List item - [`pre`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre) - Preformatted text -### [Inline Text Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics) +## [Inline Text Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics) - [`a`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) - Anchor element for creating links to other pages, files, programs - [`span`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span) - Generic inline container @@ -43,11 +64,11 @@ To learn more about each element, click on the element names below. - [`sup`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup) - Superscript text - [`code`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code) - Fragment of computer code (monospace) -### [Image and multimedia](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics) +## [Image and multimedia](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Inline_text_semantics) - [`img`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) - Embeds image into document -### [Table Content](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Table_content) +## [Table Content](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Table_content) - [`table`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) - Root table container - [`thead`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead) - Table head container @@ -58,7 +79,7 @@ To learn more about each element, click on the element names below. > We used to use tables to lay out applications. Each cell would be filled with slices of images from Photoshop or Fireworks. Rounded corners were created by elaborate table tricks -### [Forms](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms) +## [Forms](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms) - [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form) - Form container - [`label`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) - Label text for form elements @@ -73,6 +94,6 @@ To learn more about each element, click on the element names below. - `radio` - `submit` -## Next Step +# Next Step [CSS Demo](../css-demo)