« previous next »
Pages: [1]

Author Topic: Web Development - HTML  (Read 11703 times)

Offline DylanCheetah

  • The Ice Prince
  • Dedicated Supporter
  • ***
  • Posts: 468
  • Country: us
  • Floof-O-Meter: 75
  • Stand up for what is right!
    • DylanCheetah
    • channel/UCqd67NThdXJwpXimwYb3kaQ
    • View Profile
Web Development - HTML
« on: October 21, 2023, 09:59:18 pm »
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: [Select]
<!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>


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.
Logged

Offline toonanimals317

  • The Fandom Queen
  • Finest Floof
  • ***
  • Posts: 541
  • Country: us
  • Floof-O-Meter: 50
  • What is grief, if not love persevering?
    • toonanimals317
    • randomnessandfandoms
    • Toonanimals
    • View Profile
Re: Web Development - HTML
« Reply #1 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!
Logged

Other Accounts - ImTheHero, Wolfshadow317, & AgentWashington - Say hi!
Sig by CheetusPeepus on Tumblr, Profile Pic lines by AViciousFox on DeviantArt

My Presets!

Offline DylanCheetah

  • The Ice Prince
  • Dedicated Supporter
  • ***
  • Posts: 468
  • Country: us
  • Floof-O-Meter: 75
  • Stand up for what is right!
    • DylanCheetah
    • channel/UCqd67NThdXJwpXimwYb3kaQ
    • View Profile
Re: Web Development - HTML
« Reply #2 on: October 24, 2023, 03:44:49 pm »
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!

I first learned how to make webpages back on my mom's old Windows XP PC. XD
Logged

Offline DylanCheetah

  • The Ice Prince
  • Dedicated Supporter
  • ***
  • Posts: 468
  • Country: us
  • Floof-O-Meter: 75
  • Stand up for what is right!
    • DylanCheetah
    • channel/UCqd67NThdXJwpXimwYb3kaQ
    • View Profile
Re: Web Development - HTML
« Reply #3 on: October 24, 2023, 03:53:42 pm »
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: [Select]
    <h1>Heading</h1>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>

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.
Logged

Offline DylanCheetah

  • The Ice Prince
  • Dedicated Supporter
  • ***
  • Posts: 468
  • Country: us
  • Floof-O-Meter: 75
  • Stand up for what is right!
    • DylanCheetah
    • channel/UCqd67NThdXJwpXimwYb3kaQ
    • View Profile
Re: Web Development - HTML
« Reply #4 on: October 27, 2023, 03:35:16 am »
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: [Select]
<a href="https://feral-heart.com">Feral Heart Website</a>

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.
« Last Edit: October 31, 2023, 01:20:56 am by DylanCheetah »
Logged

Online LadySigyn

  • Let me guess... someone stole your sweetroll?
  • Moderator
  • Community Champion
  • *****
  • Posts: 2,204
  • Country: au
  • Floof-O-Meter: 106
    • View Profile
Re: Web Development - HTML
« Reply #5 on: October 28, 2023, 04:16:43 am »
These are helpful to anyone brand new to html! I actually learnt all of this from my time on the internet over the years. Ahh the good days of messing with old DA custom boxes, websites and Tumblr lol.
Logged

Art by Majorest <3

Offline DylanCheetah

  • The Ice Prince
  • Dedicated Supporter
  • ***
  • Posts: 468
  • Country: us
  • Floof-O-Meter: 75
  • Stand up for what is right!
    • DylanCheetah
    • channel/UCqd67NThdXJwpXimwYb3kaQ
    • View Profile
Re: Web Development - HTML
« Reply #6 on: October 29, 2023, 02:36:25 am »
Quote from: LadySigyn on October 28, 2023, 04:16:43 am
These are helpful to anyone brand new to html! I actually learnt all of this from my time on the internet over the years. Ahh the good days of messing with old DA custom boxes, websites and Tumblr lol.

Hopefully, a lot of people will find this info helpful. I have more than just HTML to share too.
Logged

Offline DylanCheetah

  • The Ice Prince
  • Dedicated Supporter
  • ***
  • Posts: 468
  • Country: us
  • Floof-O-Meter: 75
  • Stand up for what is right!
    • DylanCheetah
    • channel/UCqd67NThdXJwpXimwYb3kaQ
    • View Profile
Re: Web Development - HTML
« Reply #7 on: October 29, 2023, 02:51:13 am »
For today's lesson, I will teach you how to create tables. Tables can be used to display tabular data or be used to control the layout of a webpage. Let's start by copying the page from the first lesson and pasting this HTML into the body of the webpage:
Code: [Select]
<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
        <th>Heading 3</th>
    </tr>
    <tr>
        <td>Row 1 Col 1</td>
        <td>Row 1 Col 2</td>
        <td>Row 1 Col 3</td>
    </tr>
    <tr>
        <td>Row 2 Col 1</td>
        <td>Row 2 Col 2</td>
        <td>Row 2 Col 3</td>
    </tr>
    <tr>
        <td>Row 3 Col 1</td>
        <td>Row 3 Col 2</td>
        <td>Row 3 Col 3</td>
    </tr>
</table>

The "table" tag is used to create a table, the "tr" tag is used to create a row, the "td" tag is used to create a cell within a row, and the "th" tag is used to create a heading within a row.
« Last Edit: October 31, 2023, 01:21:32 am by DylanCheetah »
Logged

Offline DylanCheetah

  • The Ice Prince
  • Dedicated Supporter
  • ***
  • Posts: 468
  • Country: us
  • Floof-O-Meter: 75
  • Stand up for what is right!
    • DylanCheetah
    • channel/UCqd67NThdXJwpXimwYb3kaQ
    • View Profile
Re: Web Development - HTML
« Reply #8 on: October 31, 2023, 01:28:51 am »
Today I will teach you about lists. Let's start by making a copy of the page from lesson 1 and pasting the following HTML into the body of the webpage:
Code: [Select]
<h4>Ordered List</h4>
<ol>
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ol>
<br>
<h4>Unordered List</h4>
<ul>
    <li>First Item</li>
    <li>Second Item</li>
    <li>Third Item</li>
</ul>

The "ol" tag creates an ordered list. Ordered lists have numbered items. Each item is created with the "li" tag. Likewise, unordered lists are created with the "ul" tag and each item has just a bullet point next to it. Also, the "br" tag can be used to leave a blank line between other elements.
Logged
Pages: [1]
« previous next »