This content is currently in development. Please have patience.
Overview
This is a quick troubleshooting document, and goes far enough into things to help some detailed issues, but certainly doesnt cover everything, or in great details. Hopefully this will help you in troubleshooting, creation of some minor things, and editing more advanced things. Please remember we are here to help though!
Sections
What does hTML control
HTML, or Hypertext Markup Language, is the structure of content on the page. The language tells the browser what kind of items it is displaying, and what to display. It will tell the browser the difference between a header, a paragraph, a table of information, a link, or an image. Each one of these things has a different tag associated in the language to tell the browser how to act with the content inside of it.
Back to top
tag structure
Basic Structure
Tags are how the language tells the browser what is structure, and what is actual content. Every element in html needs to be surrounded by tags - a start tag that looks like this:
<a> or <h2> or <p>
and an end tag that looks like this
</a> or </h2> or</p>
The tags define what the stuff between the tags actually is.
<a> = a link; so <a>The Link text that shows up</a>
<h2>=heading2; so <h2>A Second Level Heading</h2>
<p>=paragraph text; so <p>A new line of regular paragraph text.</p>
Required Nested Tags
There are tags that need to go inside of other tags, or they will not look right. For example, to create a numbered list, there are 2 tags that are required, and they MUST be in this order:
<ol>
<li>List item </li>
<li>List item </li>
</ol>
You can have as many <li></li> inside as you want, but if that </ol> moves like:
<ol>
<li>List item </li>
</ol>
<li>List item </li>
you are going to end up with either a broken page or two separate lists.
Other Nested Tags
If you have nested tags (ones inside of each other), they MUST be mirrored with the content in the middle. For example, if you wanted to bold the word "this" in the code:
<p><strong>This</strong> would work</p>
<strong><p>This</strong> would not</p>
You see, if the tags are not in the reverse order, things will start breaking. In the above case, it is not as extreme and may even still bold the item. However, because the hubsite code editor tries to fix code it thinks is broken, it may cause bigger issues - rearranging header endings and starts, combining lines or list items, etc.
Back to top
tags you will see and what they are
Regular Tags
<h2> = Heading 2, like in Micorosft Word (headings 1-6 also available as h1,h2,h3, etc)
<p> = Paragraph text
<ul>, <ol>, <li> =unordered (bulleted) list, ordered (numbered) list, list item
<span> = a subsection of text to be able to use without breaking up text. used in cases where you want to highlight, color, or otherwise style a part of a paragraph without breaking into a new paragraph.
<div> = a divider or block of content. it helps separate content into managable chunks to style or format
Special Cases
Each of these below are used differently than the tags above.
<br/> or <br> = break or line break. Can be entered without the /, and is only one single tag with no closing tag.
<img> = image - It does not require start and end tags, but requires attributes to work
<a> = Anchor or Link - requires the start and end tags, and it requires attributes to work.
<iframe> = Requires an attribute to work
Back to top
attributes and how to use them
There are sometimes attributes within a tag that help connect the tag to styling, or actions.
- Attributes must be put within the start tag, and not all attributes work with all items.
- Attributes are structured like attributeName="value"
- the quotes MUST be around the value, and you always use an equals sign between the name and the value or option you are choosing.
- The order of the attributes does not matter, but spacing can! make sure there are spaces between the tags and the attributes, the quotations and the attributes, etc
-
<a href="matsugov.us">This link now goes to matsugov.us</a> - you must use the address to go to a link url
<a href="#Section1">This link now goes to the id named Section1</a> - Or to a spot in the page using IDs
<h2 class="myHeadings">This grabs a cool defined style we set up called a class</h2> - This can be grabbed with external or internal css (but not inline!)
<image src="<"https://d1159zutbdy4l.cloudfront.net/public/uploads/ad98cb5c-0df8-4c11-9639-334dabfce8deoptimized_images/500x332_optimized_image.jpg" alt="Lazy Mountain"> - This gets the image at that URL and tells the system that the alternative text is "Lazy mountain"
Back to top
CSS notes
CSS, or Cascading Style Sheets, is a system by which the html code of websites is styled. Most of the CSS that you will encounter is either already made for you in separate documents, or added by the hubsite system.
Examples of what you will see:
How to Use Inline CSS
Usually, you will want to use external, or internal css at the head of a document. However, there will be times that you cannot edit the entire content, and only have access to pieces. In these cases, you can only use inline css, so you need to know how to set it up. First, you will add an attribute to whatever tag you would like to style.
For example, if you would like to add a color to a heading, you would change the heading from this:
<h2>Section header</h2>
to this
<h2 style="">Section header</h2>
Now, that only gives you a place to put the styles. now we need to add them. In internal/external css, the format looks like it does above. We just need this section:
color:purple;
This is true for nearly every CSS option and value - though not all will work on all items. Now we put the css into the header inline like this:
<h2 style="color:purple;">Section header</h2>
And now you have a purple header :) You can add one, or 200 styles to things (please don't add 200). the order of the items doesnt matter, but it could look somehting like this:
<h2 style="text-shadow:2px 2px #70161E;background-color:#FFFFCC;color:navy;text-transform: uppercase">Section header</h2>
Things to Remember for troubleshooting
- The placement and specificity of the CSS matters! Inline css will overwrite css in the headers, section styles will be overwritten by specific tag styles.
- There is a LOT about specificity, but just know if something isnt working, it might not be specific enough
- Not all systems allow all styling!
- there are a ton of text specific styles, and they bounce between text- or font- (like text-decoration, text-shadow and font-family, font-size etc)
Back to top