#html beginner

[avescorviidae]

TOYHOU.SE TIPS FOR BEGINNERS

Hi! I’m new to Toyhou.se, and only started dipping my toes into coding a few months ago.

Although I can’t code properly yet, I still have some tips for getting into use of the website.

Disclaimer: This is only useful for very new beginners, I am not claiming to understand any of what I’m talking about!

1. FINDING YOUR PROFILE CODING THINGY

To code your profile, you need to go to settings, as seen here:

It’s going to be a bit overwhelming, but familiarise yourself with each tab of your settings bar.

Here is where you want to go:

The biggest part of using this HTML code box is to disable the WYSIWYG, which will allow you to actually input HTML and run it.

You do that by tapping this:

You can find HTML templates by browsing. 

The search page is pretty self explanatory, just have a flip through and familiarise yourself with the search settings. These settings are very diverse, and you should have no issue perusing the website to its full potential.

If you want to find codes type “profile” into the tags bar, that usually works for me

IMPORTANT NOTE: When using a template or code made by someone else, remember to read the rules of the code, boundaries are important! And make sure you always credit. The credit will often already be provided, so make sure to not obscure that. If it is, add credit somewhere visible on the page.

2. UPLOADING A CHARACTER

You can create a character here:

It will always be customisable, so if you need to customise it after submission, here’s how you find it again:

You’re gonna want to click on the characters icon:

And from there, search for CONTROL SETTINGS in the bar to the left. It will be in Manage Character > Edit Profile:

3. WEBSITES THAT WILL BE YOUR BESTEST BUDDY FOREVER

For Coding:

Circle Journey - https://th.circlejourney.net/ 

For Icons

Font Awesome - https://fontawesome.com/search 

For Image URLs:

ImgBB - https://imgbb.com/upload 

Image Colour Picker: https://imagecolorpicker.com/en

Other Colour Hex Websites:

https://redketchup.io/color-picker 

https://www.w3schools.com/colors/colors_picker.asp 

https://htmlcolorcodes.com/ 

4. CODE LINES THAT MIGHT SAVE YOUR ASS SOME SEARCHING ON MORE THAN ONE OCCASION

For Full-Page Backgrounds:

<div style="position:absolute;top:0;bottom:0;left:0; background:url(IMAGE URL HERE) fixed center;background-size:cover;width:100%;z-index:-1;"></div>

For Full-Profile Backgrounds:

<div class="col-lg-2 col-md-3 hidden-sm-down sidebar" style="height:75px;position:fixed;right:inherit;left:0;bottom:0;"></div> 

<div class="card rounded-0 border-0 col-lg-10 offset-lg-2 col-md-9 offset-md-3 p-0" style="overflow:hidden;position:fixed;bottom:0;top:0;left:0;z-index:-1; background-image: url(IMAGE URL HERE); background-attachment: fixed; background-size: cover; background-position: center;"> </div>

For Colour+Opacity:

style="color:rgba(0,0,0,0.1)"

(add in the RGB values (not HTML code) into the first three 0s for your colour. The 0.1 can be adjusted, i.e. 0.80, for the opacity)

5. LINKS!

Full Page Background Image Troubleshooting:

https://toyhou.se/~forums/16.htmlcss-graphics/195730.add-full-image-background

https://toyhou.se/~forums/16.htmlcss-graphics/214765.adding-a-background-image-on-profiles-in-html 

Music Player Tutorial:

https://toyhou.se/6560537.-music-player-tutorial-f2u-

On my page I use codes by these wonderful people!

https://toyhou.se/jiko 

https://toyhou.se/Lechet 

https://toyhou.se/BlipiTheDog 

https://toyhou.se/Pinky 

And my profile is this:

https://toyhou.se/AvesCorvidae 

Please feel free to DM me if you have any other questions, or if I got something wrong!

If you’d like to, we can also be mutuals on toyhou.se

That’s all, thank you!

[kilaroka]

I made a neocities site!

I saw some really awesome ones that others made and I got really inspired to make one too! I’m pretty new to HTML writing so it’s limited but it’s a work in progress!

https://killychan.neocities.org/

The site includes a small art gallery, a tiiiiny page exploring and an unfinished gallery of my ukagaka models with their nar files!

[ghostype-html]

Back again!

Hello, my friends. With slight delay, I welcome you back to my weekly blog. 

Today I will introduce some new tags to you, along with a few recaps of things we have already covered. Just so we’re all back on the same page. So, without further a-boo... 

We know that we must nest our header in the navigation section. You have the content area and main content, sidebars for advertisements, links, extra information etc. This is what gives our web page structure, and the semantics we add gives it meaning. 

Div tags (dividers) were used before in HTML, but things got confusing as each coder had different ways of defining the parts of navigation, which made it difficult for semantics to be made. Thankfully, they have now created a standard so that bots can ensure they find the specific elements and their true meaning. 

The <header> element represents a group of introductory navigation aids. Many pages have a mast head in the header area, that may contain the site name, logo, search bar etc. The <nav> element represents pages that are a major navigation blocks (for example, a table of contents), by nesting lists in the element (for example, the header, footer or sidebar).

The <article> element  can be a standalone tag in any section of the page. You can have multiple <article> tags on one page, or you can have <article> elements within an <article> (for example, a comment on a blog). The <section> element is similar to the <article>, but it doesn’t need to make sense out of context of the document. It represents a group of related content, so don’t use it for styling!

The <aside> element represents everything inside and related to the main content. It is used for when you want a sidebar, either on a page or within an article. However, make sure that the contents are related to the article.

The <footer> lies at the bottom of the page, and may include contact details, more advertisements, copyright information etc.

Back to our beloved <div> elements... They are used to group content together. Only use them to hook CSS where appropriate. They have no meaning by themselves. Avoid what they call a “div soup” by structuring your HTML document with identifiable sections, and remember, use semantic elements where you can. It helps the machines infer structure of content, and gives you a standardised vocabulary for organising your web pages.

Say your page had three sections, and you want two out of three styled differently. You would do this by putting a <div> outside the two sections, and nest the two sections outside to the div. REMEMBER: only use the div for layout purposes! You can use the <body> element as a natural wrapper for site content. If you wanted to style a particular block of content, a <div> is suited.

<div> elements are block-level elements, meaning they always appear on a new line and are 100% wide. Block boxes appear below the previous block element. The width of these boxes are set automatically based on the width of the container, which would be the full width of the browser page. The height, of course, is based on the content it contains.

Inline boxes don’t affect spacing. They are not for determining layout, they simply style the stuff inside a block, and the width is based on its contents. Inline elements will appear next to each other (<a>, <em>, <strong> etc.) which you will easily learn along the way!

<span> is a generic inline grouping element. It is used to contain a section of text where there is no suitable element to differentiate it from the surrounding text. It is mainly used to apply styling in CSS.

As we know, class attributes allow you to identify one or more elements in a document. They can appear multiple times on  page, and one element can have multiple attribute classes. 

As we know, the <main> element represents the main section of content. This should be unique to the document, excluding any content that is repeated across other documents. Using a combination of elements, class and id attributes give structure. Our <main> element can be placed in the main content section. We can have the <header> and <footer> inside an <article>. Oh, and one final recap, the <meta> element includes information about the document. It’s a void element, meaning there’s no content within, and it uses attributes to carry the information, and it must appear inside the <head>. 

Well, that’s all for now... But don’t worry, there will be more.. much more!

BOO-bye now! Don’t forget to close them tags!!

[h-ibiscus]

Who wants to see the nonsense that is my first html page displayed as a new page on my blog?

[paradoxialunicornbacon]

Learning HTML

Heading

Paragraph

Para graph

Paragraph

Paragraph

Paragraph

Paragraph

I am learning html look at these spaces.

Tumblr.com