Off topic > Discussion Board
Web Development - HTML
DylanCheetah:
Hello everyone. I recently graduated from a web development certification class, so I thought it would be fun to share some of the things I have learned. I will start by teaching you about the fundamentals of HTML so you can start designing your own webpages for fun.
HTML (hypertext markup language) is used to define the layout and content of a webpage. Every webpage has a similar structure. Here is an example of a minimal webpage:
--- Code: ---<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
Hello World!
</body>
</html>
--- End code ---
If you paste the above HTML into a text editor and save it as "index.html" you can double-click the file to view it in your web browser.
HTML consists of tags and text. Tags are enclosed in angle brackets like "<html>". Most tags also have a corresponding end tag that ends with a slash like "</html>".
The "!DOCTYPE" tag indicates the document type. For HTML 5 the document type should be "html".
The "html" tag contains all of the webpage content and it has a "lang" attribute whose value indicates the language that the text in the document was written in such as English (en).
The "head" tag contains metadata such as the title of the webpage.
The "title" tag contains the title of the webpage.
The "meta" tag contains metadata used by the web browser or search engines. Its "name" attribute determines what sort of data the tag contains and the "content" attribute contains the tag's data.
The "body" tag contains the body of the webpage. This is the part that the user sees in their web browser. For this example, I just placed some plain unformatted text in it.
toonanimals317:
Very insightful! I remember taking a coding class in high school and this brought back some memories! I hope that people can make use of this guide!
DylanCheetah:
--- Quote from: toonanimals317 on October 23, 2023, 11:39:07 pm ---Very insightful! I remember taking a coding class in high school and this brought back some memories! I hope that people can make use of this guide!
--- End quote ---
I first learned how to make webpages back on my mom's old Windows XP PC. XD
DylanCheetah:
For today's lesson, we will explore some ways to format text in the body of a webpage. Let's start by making a copy of the webpage we made in the first lesson and name it "text-formatting.html". Then open the file and paste the following HTML into the body of the webpage:
--- Code: --- <h1>Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
--- End code ---
The "h1" tag is used to create a large heading. We can also add smaller headings with "h2" through "h6" tags.
The "p" tag is used to create a paragraph.
DylanCheetah:
Today I will teach you how to create hyperlinks. Make a copy of the page from the first lesson and paste this into the body of the webpage:
--- Code: ---<a href="https://feral-heart.com">Feral Heart Website</a>
--- End code ---
The "a" tag is used to create a link to another webpage. Its "href" property contains the URL to visit when the link is clicked. Notice that the link text doesn't have to be the same as the URL.
Navigation
[0] Message Index
[#] Next page
Go to full version