Reference: Zero to Internet: Your First Website
Websites are just files with text. You can create a website right now with nothing but the text editor you already have.
my-sitemy-site, create a file called index.html
index.html like: "Hi my name is ... and this is my
website."index.html and it'll open in your default browser! You have a
website!You can use any of the following to publish your website i.e to make it available for anyone to access on the web.
Our site is pretty simple! It does not look as complicated or involved as a lot of the websites we see out there. Why is that?
Websites are made up of plain text — you could paste in text from your Notes app and call it a website.
But websites also consist of HTML elements/tags.
We wrap parts of our page in tags to tell the web browser what they are.
If we wrap text in <h1></h1> this tells the browser that text is a
heading.
An HTML tag typically has an opening tag and a closing tag. The closing tag
looks identical to the opening tag, except it begins with a slash, /. The text goes
inside.
This page lists all the HTML elements, which are created using tag.
Some HTML elements change how text is styled on the page.
Pick an element/tag from the
HTML Elements That Affect Text Styling page and add it to your
index.html. How does the text differ
from the rest of the unwrapped text on the page?
Some HTML elements come with their own visual box — they change how content is arranged/organized on the page, and may also include styling.
Try it yourself! Pick an element/tag from the HTML Elements That
Affect
Layout page and add it to your index.html. How does it differ from
the rest of the unwrapped text on the page?
While some HTML elements do have styling built in, HTML is largely concerned with what things are: this is a heading, this is a list, this is a paragraph.
To define how things look, the browser uses Cascading Style Sheets, or CSS.
One way to include CSS is by using the <style> tag and putting CSS code
directly into it. For example:
<style>
body {
font-family: 'Courier New';
}
</style>
If you included this code somewhere on your webpage, it would change the font of the
<body> tag (so, all of the visible text on the page) to use that font.
CSS styles can target HTML elements on the page and apply styles to them.
So if you want, for example, all the headings on the page to be the color red, with a background of black:
h2, h3, h4, h5 {
color: 'red';
background-color: black;
}
So the syntax is:
[selector] {
[styles]
}
Selectors can be:
p or h2<p class="with-border">Hey my name is Yeli</p>
.with-border {
border: 1px dashed blue;
}
Selectors can be:
Self Exploration:
everythingyoucandoontheinter.net & the code for them.
But there are a lot of other fonts that could make your website/poem more expressive.
This website uses the font Ojuju by a Nigerian designer: kpojo.world
My other poem website, Grief Found Me uses a computer-y, monospace font, Departure Mono, to emulate the feel of a desktop.
I’ve talked a lot about interactivity, which we can define as when the user does something, there is a reaction to your action.
How this happens on websites is through JavaScript.
Javascript defines, through event listeners, what happens when a user does something.
moon
document.getElementById('trigger').addEventListener('click', function(e) {
e.textContent = 'Over the moon';
});