Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'beginners guide'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Site Information
    • Information
    • Announcements
    • Ask us
    • Introduce Yourself
  • Spotlight RPG Challenge
  • Roleplay Conversations
    • Roleplay Chat
    • Roleplay Management
    • Member Confessions
    • Staff Confessions
    • Shout Outs
  • Creation & Development
    • Brainstorming & Ideas
    • Hosting Discussions
    • Graphics Discussion
  • Assistance
    • Site Reviews
    • Coding Help & Requests
    • Graphics Requests
  • Personal RP Requests
  • Site Requests
  • Wanted
  • Learn HTML/CSS's General conversation
  • Learn HTML/CSS's Ask for help
  • Learn HTML/CSS's Quick Tips
  • Modern Fantasy Circle's Topics
  • Historical RPs's Topics
  • Book Club's Topics
  • Make My Life Make Sense's Topics
  • Dragonriders of Pern Boards's Topics
  • IPS Staff People's Tips and Tricks
  • IPS Staff People's Topics
  • The Elizabeth Fan Club's Topics
  • Jcink Hosted's Topics
  • Graphics Showcase & Discussion's Topics
  • MyBB Staff People's Topics
  • SMF Staff People's Topics
  • Monster Fans's Topics
  • Discord's Topics
  • Gamers's Topics
  • Pet People's Topics
  • Site Design's Topics
  • Cooking's Topics
  • Cooking's Recipes
  • Star Trek's Topics
  • Star Wars's Topics
  • Game of Thrones's Topics
  • Cosplay's Topics
  • The Writing Pad's Discussion
  • The Writing Pad's Writing Exhibit
  • MTV's THE REAL WORLD!'s Non-RP Chat & Discussion
  • MTV's THE REAL WORLD!'s RL Storytime
  • MTV's THE REAL WORLD!'s The Hot Seat
  • MTV's THE REAL WORLD!'s Forum Games
  • NaNoWriMo's Topics
  • Harry Potter's Topics
  • Dr Who's Topics
  • Supernatural (The TV Show)'s Topics
  • Firefly's Topics
  • The Bug Enthusiast's Bugs, mice, and all things talk
  • Gaia's Feedback and Discussion
  • Gaia's Development and Info
  • Gaia's Feature Requests
  • Gaia's Questions

Categories

  • The Initiative Services and Features
  • Forum Building and Management
  • Writing Materials
  • Being a Member
  • Software
  • Coding
  • Graphics

Categories

  • Roleplay Search
  • Writing Partner Search
  • Character Home Search

Categories

  • Active Challenges
  • Archived Challenges

Categories

  • Application Templates
  • Plotters
  • Post Templates
  • Staff Templates
  • Thread Trackers
  • Other
  • Pending Challenge Entries
  • Past Challenge Entries

Categories

  • Jcink Themes
  • ProBoards/FreeForums Themes
  • MyBB/Icyboards Themes
  • IPS Themes
  • SMF Themes
  • phpBB Themes
  • Other Themes
  • Modifications
  • Make My Life Make Sense's Files
  • Dragonriders of Pern Boards's Files

Blogs

There are no results to display.

There are no results to display.

Calendars

  • Community Calendar
  • Character Birthdays
  • Book Club's Events
  • Make My Life Make Sense's Events
  • Dragonriders of Pern Boards's Events
  • NaNoWriMo's Virtual Write Ins

Product Groups

  • Converted Subscriptions
  • Hosting
  • Advertising

Collections

  • Settings
  • Staff
  • Notifications
  • Forums
  • Submitting to the Directory
  • RPG Directory
  • Playby Directory
  • Searching for Roleplay
  • Guides
  • Challenges

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Discord


Twitter


Skype


Trillian


Are you a Poke Warrior?

Found 2 results

  1. In this guide, we're going to guide you through the jungle of html and css syntax, whilst also explaining what different terms mean. Introducing: HTML HTML is the acronym for HyperText Markup Language, it's the the basic building blocks for the web, it's structure, or it's skeleton. Here is an example of some of the HTML from this post template. <div class="bstfrnds"> <div class="bstfrnds-header"> <img src="//images.rpginitiative.com/uploads/monthly_2018_08/large.bstfrnds-banner.jpg.b5fb9b34bbcfdcc684a507a74802f425.jpg" /> <h3>Here is a title</h3> </div> <div class="hc-tabs-wrapper"> <div class="hc-tabs"> <ul class="hc-tabs-list"> <li class="hc-tab-active"> <span data-tab="hc-tab01">Tab 01</span> </li> <li> <span data-tab="hc-tab02">Tab 02</span> </li> <li> <span data-tab="hc-tab03">Tab 03</span> </li> <li> <span data-tab="hc-tab04">Tab 04</span> </li> </ul> </div> <div class="hc-tab-content"> <div class="hc-content-block hc-tab01 hc-tab-show"> <h4>This Is Tab 01 Content</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis laudantium, fugiat pariatur, saepe tenetur accusantium ut voluptates neque hic dolorum! <a href="//google.com">Placeat</a> unde qui cupiditate numquam aliquid, id illo. Quibusdam, ducimus.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae illum dicta quidem laudantium sed voluptas ipsam repudiandae corporis veritatis, nostrum fugit harum, nihil dolorem saepe perferendis <a href="//google.com">cumque</a> temporibus eum. Atque.</p> </div> <div class="hc-content-block hc-tab02"> <h4>This Is Tab 02 Content!</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis laudantium, fugiat pariatur, saepe tenetur accusantium ut voluptates neque hic dolorum! Placeat unde qui cupiditate numquam aliquid, id illo. Quibusdam, ducimus.</p> <ul> <li>List item 01</li> <li>List item 02</li> <li>List item 03</li> </ul> </div> <div class="hc-content-block hc-tab03"> <h4>This Is Tab 03 Content!</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos ipsa distinctio id, neque repellendus quod corrupti voluptas rerum accusantium minus molestiae. Deserunt, dolores ex sapiente iusto iure hic soluta assumenda.</p> </div> <div class="hc-content-block hc-tab04"> <h4>This Is Tab 04 Content!</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> </div> Every webpage (or post template!) is made up the HTML skeleton and every skeleton is made up of particular bones - or elements. Elements? Each element consists of two tags, an opening and a closing tag. The tag contains the name of the element and is wrapped in opening and closing angled brackets. Here's a picture to help you out! As you can see, <div> and </div> are the tags of the content division element. Therefore, the very first line in the above code consists of an opening tag for the first element of the code, a content division element. What kind of element you choose to use depends entirely upon what you are trying to achieve. It is important to choose the correct element for the job, just like it's important to choose the right tool for the job! This is because browsers interpret element types in particular ways, and have them behave accordingly. Some elements for example, will sit side by side with each other, because they're what is called an inline element. Others will start a new line because they're a block level element. In the above example, the coder wanted the content to be on it's own line but did not for example, consider it an article (<article></article> would be more appropriate then). Where all other semantic elements are exhausted, use div. So if <div> refers to an element, what does the rest of the line refer to? To refresh your memory on the line in question: <div class="bstfrnds"> The rest of this line is made up of attributes. Attributes? An attribute is a word used within the opening tag to control the element's behaviour, or providing metadata. It always uses the following syntax: name=value That is, the attribute's identifier (name) following by it's value. In this example, the attribute identifier is name, which tells the browser that the element will be referred to by attribute value, bstfrnds. This is useful when you have a collection of elements that you want to appear several times, on several pages, but to look the same. You will give those elements all the same name, so that later you can refer to them all in your CSS. Another example of an attribute can be found here: <img src="//images.rpginitiative.com/uploads/monthly_2018_08/large.bstfrnds-banner.jpg.b5fb9b34bbcfdcc684a507a74802f425.jpg" /> In this example, the attribute identifier is src, that is, the URL of an embeddable content. The attribute value is the URL for the image of the man with his dog. Paragraph vs Line Break Earlier I mentioned that your choice of element was important because it would behave in different ways. We'll talk more about this now, when comparing paragraphs with line breaks. Paragraph A paragraph element is, as expected, a paragraph. For example, this guide is made up of paragraph elements. <p> <strong>Paragraph vs Line Break</strong> </p> <p> Earlier I mentioned that your choice of element was important because it would behave in different ways. We&#39;ll talk more about this now, when comparing paragraphs with line breaks. </p> <p> <strong>Paragraph</strong> </p> <p> A paragraph element is, as expected, a paragraph. For example, this guide is made up of paragraph elements. </p> See? A paragraph element may render slightly differently in every browser but they will all separate paragraphs with a single blank line. This is different to a line break, which simply puts the proceeding text on a new line, under the preceding text. Example: This is<br> a line break Renders as: This is a line break using doHTML? Try this: <p /> That will create a new blank line without needing to type in two line breaks. So, want to create a paragraph? Use the paragraph tag. Want to make a line break? Use the line break tag. Style HTML without a style is a white page with words, elements following one after the another as the browser dictates. The magic happens after the style tag. You should only use the style tag for doHTML, in cases where your administrator does not provide you with a place to upload your own CSS document. The style tag contains the CSS! CSS - Cascading Stylesheet CSS is the acronym for Cascading Stylesheet, which is a list of code that controls how a page looks in the browser. The stylesheet is referred to as cascading because of the rules that govern how rules and declarations are prioritised. The most basic explanation is that the rule or declaration that comes later in the stylesheet is prioritised over those that come earlier in the stylesheet. For example: <div class="example"> I'm an example. </div> <style> .example { background: white; color: black; padding: 10px } .example { background: #1a1a1a; color: #008000; padding: 20px } </style> The first rule will not be used. The second will be. I'm an example. .example { background: white; color: black; padding: 10px; } .example { background: #1a1a1a; color: #008000; padding: 20px; } See? The background is off-black rather than white, the text is green, not black and the padding is set to 20px. There are exceptions to that general rule. Briefly: Putting !important after a declaration will make it override proceeding declarations. .example { color: red!important; } The more specific the selector, the more priority the browser will give the rule. I used a few unfamiliar terms there! Let's start breaking down what a stylesheet contains. CSS Ruleset/CSS Rule A CSS Ruleset is made up of a selector or selectors, and a declaration block. It looks like the following: .example { background: white; color: black } The entire code in the above example is called a CSS Ruleset. Selector A Selector is the first ingredient in the CSS Ruleset. It is used to select the element whose appearance you want to alter. The following is the selector from the above example. .example A CSS Ruleset may contain multiple selectors. An example from this very site is: .fulluserNav, .upperNav { background: #000; width: 100%; padding: 5px; height: 45px } This ruleset will alter two elements. One that is named fulluserNav and another that is named upperNav. Declarations Block The next ingredient to the CSS Ruleset is the declaration. Every declaration block starts with a curly bracket: { and ends with a curly bracket } From the earlier example: { background: white; color: black } The above is a declarations block. Declaration Within a declarations block is at least one declaration. background: white; The above is a declaration! We're going deeper! Property Within each declaration is a property. background The above is a property. Examples of properties include: height width float display color background padding margin Value The property is followed by a value, and the property and the value is divided by a colon. white The above is the value in the declaration we have been using as an example. Nearly every declaration should finish in a semi-colon. You do not need to add a semi-colon to the last declaration in a declaration block. Leaving out the semi-colon for the last declaration in every declaration block can decrease the amount of time it takes for your site to load! So, to bring it all together! /* the start of a ruleset */ selector /* start of a declaration block */ { /*start of a declaration */ property: value; /* end of a declaration */ /* start of another declaration */ property: value /* I am the last declaration in this declaration block, don't need a semi colon! */ } /* end of declaration block */ /* end of a rule set */ /* in other words! */ .example { background: white; color: black } These are all the basic building blocks of a webpage. The ability to identify what each aspect is called can help you in asking questions or in explaining what issue you're having.
  2. This guide will teach you what makes up a HTML and CSS code, giving you the language to be able to identify each part of the code. Knowing the right language allows you to better communicate your message to other coders, thus increasing your ability to state what you're having trouble with. Or what you're looking for. View full guide
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.