Well, my friend, you have come to the right place.
(probably not)
Well, there are 3 main coding languages used for making websites.
HTML, CSS, and JavaScript (or JS)
Let's learn HTML first, since the other two kind of depend on it.
(Did I spell formatting right?)
In order to make an HTML page, the file needs to end with
.html or .htm. For example, the file I am
writing this in is named learnhtml.html.
However, you must name the starting page of your site (or main page) index.html.
You also must start all HTML files with
<!DOCTYPE html>.
Then, you have to type in the first HTML tag in your file (assuming
<!DOCTYPE html> doesn’t count), which will be
<html> and </html>.
Remember that most tags start with an opening tag
<html> and end with a closing tag
</html>.
Next, we have <head> and </head> and
<body> and </body>.
Your head will be at the top and inside your
<html> tag, and the body is what users will see on your
site.
Let's talk about text like the kind you are seeing as I type this.
This is the code I just wrote:
<p>Let’s talk about text like the kind you are seeing as I type
this</p>
Did you catch that? Exactly! I used the
<p> and </p> to write a paragraph!
(Okay, that was cringe as hell; sorry, but you get the point.)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
Next, there are headings which you type with <h1> (the
number is important; I will talk about that next).
I am talking about headings now, as the last sentence foreshadowed. There are 6 heading sizes, each decreasing in size from the last. Here is an example:
<h1> - Heading 1 sizeThis is the biggest heading without special sizing.
<h2> - Heading 2 size<h3> - Heading 3 sizeAs the number increases, the size decreases.
<h4> - Heading 4 sizeThis can be used for even smaller, less prominent text.
<h5> - Heading 5 size<h6> - Heading 6 sizeThis one is even smaller than a paragraph size.
<hr> AND <br>
The <hr> tag creates a horizontal line to separate
content, while the <br> tag creates a line break within
the text. Use <hr> for thematic breaks and
<br> for spacing in paragraphs.
Example of <hr>:
This is the first paragraph.
This is the second paragraph, separated by a horizontal line.
Example of <br>:
This is the first line.
This is the second line, right below the
first line.
You can add comments in HTML using the
<!-- comment --> syntax. Comments are not displayed in
the browser and are useful for leaving notes in your code.
Example:
<!-- This is a comment and will not be displayed in the browser
-->
makes:
This is a comment and will not be displayed in the browser.
HTML supports ordered lists (<ol>) and unordered lists
(<ul>). List items are defined using the
<li> tag.
Example of an unordered list:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
makes:
Example of an ordered list:
<ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
makes:
You can create hyperlinks using the <a> tag. The
href attribute specifies the link's destination.
Additionally, the target attribute determines where to open
the linked document.
Example:
<a href="https://www.example.com" target="_blank">Visit
Example</a>
makes:
Visit Example
Button links can be created using the <button> tag
combined with JavaScript or by using the <a> tag styled
to look like a button.
Example of a button that acts as a link using JavaScript (you will learn later) :
<button onclick="window.location.href='https://www.example.com'">Go
to Example</button>
makes:
However, a simpler way is to use an anchor tag and some css (you will learn later):
<a href="https://www.example.com" style="display: inline-block;
padding: 10px 20px; background-color: #007BFF; color: white; text-align:
center; border: none; border-radius: 5px; text-decoration:
none;">Styled Button Link</a>
makes:
Styled Button Link
You can add images to your website using the <img> tag.
The src attribute specifies the image's URL, and the
alt attribute provides a text description. It's important to
ensure that any images you use comply with copyright laws, such as using
Creative Commons licensed images.
For example, this image is shared under a Creative Commons license, which allows for reuse under certain conditions. Always check the specific license for details on attribution and usage.
To resize images, you can use the width and
height attributes in the <img> tag. Here's
an example:
<img
src="https://cdn.glitch.global/8464426b-020c-43ca-865f-d48065d96c59/ff94916d-601a-421d-8d96-80487f61165c.image.png?v=1730158218829"
alt="A lovely goose" width="300" height="200">
You can use various media elements in HTML:
Use the <audio> tag to embed sound content. Here’s an
example:
<audio controls>
<source
src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
type="audio/mpeg">
Your browser does not support the audio element.
</audio>
It creates an audio player in the browser.
Use the <video> tag to embed video content. Example:
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4"
type="video/mp4">
Your browser does not support the video tag.
</video>
This creates a video player for the specified video.
Use the <iframe> tag to embed another HTML page within
the current page. Example:
<iframe src="https://www.example.com" width="600"
height="400"></iframe>
This will display the content from the specified URL.
Now you have a basic understanding of HTML! Experiment with these elements to create your own basic web pages.
CSS is the basic sytlying/forrmatting for your HTML code
in order to use css you can use a external stylesheet: yourstylesheetname.css or put it directly in the code.
To link your stylesheet you must put this code in your <head> tag: <link rel="stylesheet" href="yourstylesheetname.css">