| Both sides previous revisionPrevious revisionNext revision | Previous revision |
| website_making [2023/01/06 17:13] – [Guide] TheFrugalGamer | website_making [2023/04/06 15:40] (current) – [External Guides and Links] melon |
|---|
| Eventually you will want to add more info, multiple paragraphs, images, and introduce some styling, but before you start doing that, you'll need to know a little more about tags. | Eventually you will want to add more info, multiple paragraphs, images, and introduce some styling, but before you start doing that, you'll need to know a little more about tags. |
| |
| ===== Tags ===== | ===== Basic Tags ===== |
| === HTML tag === | === HTML tag === |
| In the example above, the first tag looks like this: "%%<html>%%." This HTML tag tells the browser and other software that the page it's looking at is an HTML page, and should be interpreted as such. There are other types of tags that you can start your document with, such as "%%<xml>%%" that tell the browser to do other things, but for just a simple webpage, those aren't needed yet. Notice that at the end of the document, we've told the browser that we're done with this page by putting the ending tag: "%%</html>%%". **Always make sure to close your tags, or you'll end up with problems!** | In the example above, the first tag looks like this: "%%<html>%%." This HTML tag tells the browser and other software that the page it's looking at is an HTML page, and should be interpreted as such. There are other types of tags that you can start your document with, such as "%%<xml>%%" that tell the browser to do other things, but for just a simple webpage, those aren't needed yet. Notice that at the end of the document, we've told the browser that we're done with this page by putting the ending tag: "%%</html>%%". **Always make sure to close your tags, or you'll end up with problems!** |
| Right now, the only thing we have in our body tag is the %%"<p>...</p>"%% tags, which denote paragraphs. Current standards recommend that you put all text in between P tags so that the browser displays it properly. If you've written a full paragraph and would like the text to break and start a new one, simply close the tag with %%"</p>"%%, and start with a new %%"<p>"%% tag. Try it, save your page, and then refresh the page to see what it looks like! | Right now, the only thing we have in our body tag is the %%"<p>...</p>"%% tags, which denote paragraphs. Current standards recommend that you put all text in between P tags so that the browser displays it properly. If you've written a full paragraph and would like the text to break and start a new one, simply close the tag with %%"</p>"%%, and start with a new %%"<p>"%% tag. Try it, save your page, and then refresh the page to see what it looks like! |
| |
| | === Link tag === |
| | Although not included in the tutorial above, the link tag is probably the most important tag you'll learn. It lets you link to other pages on your site and on the web. An example of a link is below: |
| | |
| | <code> |
| | <a href="https://wiki.melonland.net/website_making">How to make your own website</a> |
| | </code> |
| | |
| | If you add the above link to your page, it will link to this webpage! The **href=** attribute in the tag holds the location of the link. You can include a full link, like I've done above, or you can link to a page on your site. The text in between the <a> </a> tags is what the link will show to the user. If you're linking to a page in the same folder, you can leave off the first part of the address and just include the page, like below: |
| | |
| | <code> |
| | <a href="aboutme.html">Read about me</a> |
| | </code> |
| ==== Other tags ==== | ==== Other tags ==== |
| Below are a few other tags that you can experiment to add more things to your site. | Below are a few other tags that you can experiment to add more things to your site. |
| |
| //Coming soon!// | === Image tag === |
| | The image tag looks like this: |
| | <code><img src="myimage.jpg" alt="Description of my image"></code> |
| | |
| | The image tag is unusual in that it doesn't have a closing tag; everything it needs to display an image is located between its brackets. Let's break it down so that you can learn how to use this in your own webpages: |
| | |
| | The "src=" bit of the tag is called an **attribute.** It contains more instructions for the browser that won't necessarily be seen by visitors, but are still very important. Src, in this case, stands for "source," and should be the address to your image, so it may look like "myimage.jpg" or "files/img/myimages.jpg" depending on where you've stored it. |
| | |
| | The "alt=" attribute is necessary for both screen readers and for when your image can't be rendered on the page. In this event, the browser will display a broken image icon, and then the alt text that you've included here. This is important because if your content is dependent on the image you're showing (such as using images for menu navigation or similar), then users won't know how to interact with your website in the event that the images don't load. Make sure to always include the alt="" attribute to ensure that your site is [[accessible]] for all users. |
| | |
| |
| ===== External Guides and Links ===== | |
| * [[https://thoughts.melonking.net/guides/introduction-to-the-web-revival-2-learn-about-websites|Melon's Overview of common website features]] | |
| * [[https://thoughts.melonking.net/guides/introduction-to-the-web-revival-3-make-a-website|Melon's Guide to HTML and CSS]] | |
| * [[https://learn.sadgrl.online/absolute-beginners-guide-to-neocities/|Sadgrl's Neocities Beginners Guide]] | |
