Keep in mind that the numbers represent the videos in sequence. Oh man, there are 23 videos here... each between 5 and 15 minutes! ::hulks out:: I SMASH!
The Quick Intro:
The first video gave a brief history of the internet. It wasn't very detailed, but the gist was that it started in the 1950s, was financed by governments and universities, and that in 1989, Tim Berners-Lee in England created the world wide web, changing the world for_ever_ (In case you missed it, W3 schools is named that because of the world wide web) Anyway, HTML came out soon after (Hyper Text Markup Language). This allowed for webpages to be created with text and images, and evolved to allow for new media, games, and blogs. (Hi Dev.to ;D)
In the second video, we went over the different HTML resource websites we'll be using to reference HTML information. It pointed us to what parts of the websites we'll be using the most. I explored a bit, an it seems that I'll definitely be coming back until I can remember the information.
What's a Tag?
The third video went over what a tag is, and mentioned that they're also referred to as "elements". They then made the distinction that "elements" refers to the starting tag, ending tag, and the content in between. This leads me to believe that tags are simply the tags themselves, excluding the content in between. So, to use these words in a sentence:
- "The ending tag is missing the forward-slash to indicate it is ending the starting tag's effect."
- "These tags represent bolding the words in between."
- "This element indicates that the line 'Fried chicken forever!' is formatted with italics and bold."
- "The elements in this code provide us with the buttons, text formatting, and photos shown on the website."
You get the idea...
What is an HTML Document?
The fourth video gave a brief overview of an HTML document. This is the first long video, so I know this is where the nitty gritty begins (exciting!).
We go over the following:
How to create an HTML file:
We opened up the text editor first and created a new file, saving it with the extension ".html". I'm using Visual Studio Code, but in the video, they aren't. They use Sublime Text, which I could have used, but the actual bootcamp uses VS Code - ta-dah~~. I've used it a bit before, but didn't really remember how to create the file or it's encasing folder, but I do now! ;D Anyway this step is done.
Short overview of the tags every HTML file requires:
The HTML Doctype:
Tells web browsers how they should render the page.
The HTML tag:
Except for the doctype tags, this set of tags surround the entirety of the code for the web page - literally everything.
The Head tag:
Contains information about the web page.
The Title tag:
Gives content to the title bar, or the tab.
The Body tag:
Contains the code behind the content shown in the browser.
Here is an example of what these tags look like all together.
The details!
The HTML Doctype:
This is also known as the "doctype declaration". Apparently, this isn't really a tag, so much as it is a way for the browser to be informed on the version of HTML being used so that the browser knows how to correctly read the code. Example
The HTML tags:
This is the top level tag, and as stated above, it surrounds the entirety of the code for the web page. It seems to be something that marks what is to be read as HTML?
The Head tag:
This tag contains the information and meta data about the document. The title, links to style sheets or scripts would go in the head tag element. One thing I know about this tag from my own learning is that you can state the intended user languages (English, Spanish), whether characters use Unicode or not, and if the website is public.
The Title tag:
Like it says above, this tag surrounds the text that shows on the top of the window or tabs.
Example I'm totally using markdown a lot on purpose. Gotta learn it, right?. ;D
The Body tag:
This tag contains the content of the HTML document. There is only one per document, and the bulk of the code written for the Page goes here.
Get it running in the browser!
Create the file? Check!
Add the html skeleton? Check!
Give it a title and body? Check and check!
Save the document? Check!
Open it in Chrome! Check!
(It's so pretty... - not! We've all gotta start somewhere!)
Review
We looked at webpage we created, and reviewed how the title and body tags, and how they work with the browser. The title did indeed how up on the window top bar, and it showed up in the tab when an extra tab was opened. Also, the body showed up as expected.
Viewing the HTML source code of a web page:
We right clicked and viewed the web page's source code using the dev tools of Chrome. Looking at my web page's source code, I found exactly what I had written to make the page. Then, we explored other web pages, starting with Amazon. We right clicked again and clicked on "View Page source". It will dwarf yours, but don't be bothered. Even the people who wrote that had to start somewhere, probably where we're starting now. :)
Not a bad start. I look forward to creating something a little more hefty soon. ;D
Top comments (0)