Hey there Purr-fect Peep, so you have decided to start learning Web Development. That is AWESOME! In HTML Basics we will cover some of the history of the Web and many of the basiscs you will need to get started. We are continuously looking for feedback on how to improve the page so please feel free to jump on our slack workspace for any help or suggestions.
In the very begining the Web did not require as much interactiveness as it has today. When Tim Berners-Lee created it in 1989 working at CERN it was to help link together several disparate systems that did not "talk" with each other. You can still see the original design here.
By October of 1990, Tim had written the three fundamental technologies that remain the foundation of today’s web:HTML: 1. HyperText Markup Language. The markup (formatting) language for the web. 2. URI: Uniform Resource Identifier. A kind of “address” that is unique and used to identify to each resource on the web. It is also commonly called a URL. 3. HTTP: Hypertext Transfer Protocol. Allows for the retrieval of linked resources from across the web. https://webfoundation.org/about/vision/history-of-the-web/
- All HTML documents must start with a document type declaration:
- The HTML document itself begins with
<html>and ends with
- The visible part of the HTML document is between
</>tags around content. Anything between the two tags will be represented by that markup. So in the case of our “Hello World” example there is no styling the browser just knows it belongs within the body, which belongs to the html. It does not however belong to the head, because as you can see in the code above the head was already closed with
<h1>Hello World</h1>, this represents an entire html element. You can also nest elements, for example we would place this h1 tag into our body element.
<body> <h1>Hello</h1> </body>
<h1 id='hello'>Hello</h1>. Attributes allow for us to place additional information into and about the tag. There are two types of Some of the most popular global HTML attributes are
style. In the link section below you will begin to see how we can use id. In our CSS for a 10 year old we will dive further into the css and style attribute.
<h1>defines the most important heading.
<h6>defines the least important heading.In the example below you will notice that the text is between our opening and closing tag which makes the text look differently. Browsers come with predefined styles which allow for the difference visually, otherwise this would only be represented in the markup.
divand identifier using
id=this way a link can be used so that the browser can reference the location of that id within the current page. This anchor is used in the a tag’s attribute href by placing a
#(for you young kids a hashtag) in front of the identifier. See below where we use
<a href="#divBtm">Link to Bottom Div</a>to anchor to the div with id divBtm
<div id="divBtm">Bottom Div</div>.You can think of links as the webs version of house addresses. URI (Uniform Resource Identifier) is one of Tim’s best ideas and unbelieveably forward thinking. Instead of just having a set of random numbers like
22.214.171.124you can specify an address that has meaning like https://ajonp.com, this is used in the a tag’s attribute href. The ajonp.com version is called a URL (Uniform Resource Locator) and is more commonly known as a web address. This allows us to say AJ’s house instead of the number.
<img>and a single attribute
type.The type attribute will allow the button to represent
<ul>and ordered list
<ol>. You can use many different styles for both of these lists using css. For ordered lists you have an HTML attribute
typethat can be used. For unordered lists you must use styles only to change the look, for example
style="list-style-type:circle;"will create an item with a circle at the front.For both list types you will have items that exist in that list represented with the tag
<li>. This tag will have the actual content for each item in the list.
Please see https://www.w3schools.com/html/html_basic.asp as I used that as a reference for much of this tutorial.