The WiCS high school outreach team had a great time at Charlottesville High School on February 12! Here is what we went over…
Basic HTML Concepts
HTML stands for HyperText Markup Language. It’s the main coding language you use to create websites.
We used the w3schools text editor to familiarize ourselves with basic HTML concepts such as…
This line of code is always going to be the first thing you write in an HTML file. It tells your browser (Chrome, Internet Explorer, etc.) that the stuff it’s about to read is html.
HTML is based on a system of tags (a tag is the thing that looks like this: <tag>). Tags will always come in pairs, and everything between the tags follows the rules of that tag. For instance a tag you always need in html is “<html> everything I put between these tags is my html code </html>”. You can see this in action in the text editor.
The “head” tag traditionally keeps all the html code that doesn’t necessarily show up on the page. An example of this is the title of your webpage, which looks like <title> Page Title </title>. The w3schools editor doesn’t show the function of this too well, but “Page Title” would be how your page shows up in a google search, and the name that shows up in the tab when you’re on the page. For example, whoever wrote the html of the w3schools text editor webpage wrote a line of code in their html that says:
<title> Tryit Editor v2.6 </title>
I know this because when I look at the title on the tab of the text editor, it’s called “Tryit Editor v2.6” and yet you won’t find those words anywhere on the actual page. That means the line of code belongs inside <head> </head>. (The page will still load correctly if you don’t put it in the head tag, but when another computer programmer reads your code they would expect to find this line within your head tag. So just be nice to people who might want to read your code. 🙂 )
Now that we know what the head tag does, it makes sense that the stuff you put inside the body tag is everything you actually want to see on your page (like text). The basic way you would add text to your website is by putting it inside a paragraph tag which looks like: <p> </p>. Think of this as the code for a simple text box.
There are many useful tags built in to the html language that can make your text look more fun! For example, the default code in the text editor we’ve been looking at shows you how the header 1 tag (this thing: <h1> </h1>) works. Hmm…if there’s an h1, might there also be an h2 tag? or an h3? Try it!
Do I always need a tag to write text?
Try writing some plain text without any tag (but still somewhere within your <html> </html> tag). The computer will read it and output it, but the biggest difference is that a paragraph tag will put your words into their own section/text box. Writing text without a tag will turn this html:
“My poem is very
Cool and great and
Wow I should do this for a living”
Into this on the webpage:
“My poem is very Cool and great and Wow I should do this for a living”
What other things can I do?
You now have a basic idea of how html works! You’re pretty much good to go in terms of setting up the basic structure of a website. If you want to know how to do something else, just google it! There are just too many different tags and instructions for one person to memorize them all, so googling is what real programmers do in the wild. 😉
For example, say you want to add some color to a line of text. Simply google something like “html text color”. It’s likely that w3schools is one of the top results (it’s a pretty nifty site and a good resource) but any site will do just fine. See if you can integrate the example code into your own code to give your text some color!
Viewing a Website on your Localhost
First off what’s a localhost? The easiest way to think of it is “this computer and only this computer”. If you’re looking at something from your localhost, it’s not on the internet for everyone to see. Meaning you can see it on your Chrome or Internet Explorer, but it’s not actually online so your friend won’t be able to see it on their computer if they type in the same thing. This is good for when you want to check out what your code is doing but you’re not ready to put it up on the internet yet. So the next part is going to explain how you can view a website you wrote on a web browser on your localhost.
First off all, open a text editor on your computer–any old one that’s already on your computer will do. You can use Microsoft Word, Notepad (my personal favorite), or TextEdit (I believe this is the text editor for Macs). If you have a Chromebook, the chrome store has a text editor called Caret which seems pretty simple to use. If you want to get fancy you can download a text editor that is optimized for writing code like sublime (it will color code your code so it’s easier to read and is Molly’s recommendation).
- Write some HTML code of your own, or just copy and paste what you had in the w3schools text editor for now.
- Save it as “mycode.html”. The important part is saving it as a “.html” file.
- Go to wherever you saved it, left click on the .html file, and “open with/as” your favorite web browser.
- Make some change in mycode.html, save mycode.html, then refresh your webpage. You should be able to see the change you made!
A super duper simple, bare-bones, piece of HTML that still does something: