| Both sides previous revisionPrevious revisionNext revision | Previous revision |
| website_making [2023/01/09 18:32] – [Advanced Topics] 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. |
| 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. | 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. |
| |
| ==== Advanced Topics ==== | |
| |
| * [[Editing your menu]] | |
| * [[Frames]] | |
| ===== 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]] | |
| * [[https://www.w3schools.com/html/default.asp|W3Schools HTML Guide]] | |
