BizStream Academy It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.
Some "rules"
Mentor and student Introductions
You can always email us questions at bizstream.academy.staff@bizstream.com
HTML stands for HyperText Markup Language.
HTML is the programming language used on EVERY website. It is what the browser uses to render a web page by reading the tags and interpreting the content of the web page.
HTML consists of tags enclosed in angled brackets <html>, also known as elements, and most commonly come in pairs, with a beginning and an end. HTML is styled using CSS.
Example: <h1>Heading 1</h1>
Tip: Use the “View Source” option when viewing ANY web page
Simply a file sitting in a folder on a server.
(could be html, txt, image, …)
How your computer talks to the server:
(back end/server side programming)
You want to make sure your code and test site are in separate windows.
<h1>Hello, World</h1>
<p>My first website!</p>
Congratulations, you just wrote your first HTML web page!
All the files for your site should be stored within the same folder in Editey.
This includes:
Note: File names should not include spaces or special characters. File names ARE case sensitive.
By the end of the class, you will have built a simple site using HTML and CSS on a topic of your choice. Here is one about Yoda.
Your Content
+ HTML: Structure
+ CSS: Presentation
= Your Website
A website is a way to present your content to the world, using HTML and CSS to present that content & make it look good.
Concrete example:
<p>A paragraph is your content</p>
A paragraph is your content
<tagname>Text/content that will be visible</tagname>
<p>This is a sample paragraph.</p>
The first thing on an HTML page is the doctype, which tells the browser which version of the markup language the page is using.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html>
* The doctype is case-insensitive.
DOCtype, doctype, DocType and DoCtYpe are all valid
(although that last one is pretty weird).
After <doctype>, the page content must be contained between <html> tags.
<!DOCTYPE html>
<html>
</html>
Head: The head contains the title of the page & meta information about the page. Meta information is not visible to the user, but has many purposes, like providing information to search engines.
Body: The body contains the actual content of the page. Everything that is contained in the body is visible to the user.
Let's get our web page set up with a doctype, head, title and body.
Later we'll add some content.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Hello, World</h1>
<p>My first website!</p>
</body>
</html>
Notice: After adding this HTML, what does your website look like? Why does it look this way?
All elements "nest" inside one another
Nesting is what happens when you put other containing tags inside other containing tags. For example, you would put the <p> inside of the <body> tags. The <p> is now nested inside the <body>
Elements are 'nested' inside the <body> tag.
<body>
<p>A paragraph inside the body tag</p>
</body>
Paragraphs 'nested' inside list items.
<ul>
<li>
<p>A paragraph inside a list item</p>
</li>
</ul>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
Paragraph 1
Paragraph 2
Paragraph 3
* White space is only for humans. You can write your code with any spacing.
Paragraphs allow you to format your content in a readable fashion.
* You can edit how paragraphs are displayed with CSS
Don't forget your homework!