| Both sides previous revisionPrevious revisionNext revision | Previous revision |
| website_making [2023/01/06 17:14] – [Tags] TheFrugalGamer | website_making [2023/04/06 15:40] (current) – [External Guides and Links] melon |
|---|
| 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]] | |
