Are you interested in building websites?
Well then you are in the right flippin' place!
Why Building Websites is Awesome
- SO fast and easy to publish something
- Gain a valuable and marketable skill
- Learn about the world and gain critical thinking skills
Why HTML is Awesome
- Make stuff that is pretty and easy to read
- Create more of the vast network of links that is the internet
- Use all kinds of media to send your message
HTML: Hyper Text Markup Language
Let's start with things that are not html.
Word documents with styles
Plain text documents
Spreadsheets
So as you can see, we really need know HTML to build a website.
The Biggest Thing to Know
Everything is tagged, so that it can be displayed in a special way.
Every tag has an opening and closing component.
Tags need to be nested neatly inside each other.
Pssst: hit the down arrow next
Let's get started by opening up a text editing program
Choose the most simple one you can find on your computer.
PC: Notepad. Mac: TextEdit. Linux: Gedit?
Open a new window in this text editor
Type in the words Hello World and save it as index.html
Now go and double click it in your file browser. It should open in Chrome, Safari, Firefox, or IE.
That did count! Now let's add a Paragraph of text
Type in a sentence or two, hit the return key, and type in another sentence.
Add the starting tag <p> in front of this text.
Add the closing tag </p> on the end.
(Reload the browser after every step)
Separate the Paragraphs
Since we want our browser to respect our paragraphs, we have to tag them individually.
Add one more starting tag <p> and one more closing tag </p>
Let's Create a Heading
We'll give our page a title and put it in these tags: <h1></h1>
While we're at it, a subheading between our paragraphs, using: <h2></h2>
Here's How We Make Links
Let's create another special tag <a></a> and put some link text in between the open and close tags. Anything you want.
Tags can have all kinds of attributes, and we'll use one here. Type href="http://google.com" into the opening tag after the <a part.
Let's Make This Whole Page Legit
Add <html></html> around the entire document we've written.
Go ahead and add <body></body> around all of our text as well.
Want a Title in the Tab?
Add <head></head> inside the HTML element, but before the BODY open tag.
Add a new tag <title></title> inside the HEAD element, and put some text in there.
Last Thing Today:
We want to make sure all web browsers display our page as uniformly as possible.
At the very beginning of this whole HTML document, add this text: <!DOCTYPE html>. This isn't a true tag, so we won't be closing it.
This tells the browser about when our page was made and how it should be rendered.
We did it!
See, it's not painful at all.
How did you do?
- Reach out and let me know!
- Upvotes, emails, shares, comments all welcome.
- Next Step: Learn more HTML elements and attributes! (There are many)
- Please feel free to give this presentation and inspire
https://reddit.com/r/ladydevs