Below, I'll go over the terms you'll commonly see in coding, sometimes only listing the way it translates into code. First, what does HTML stand for? HyperText Markup Language. And CSS? That’s for Cascading StyleSheets. Here are some basic terms/elements of coding you should keep in mind:
- Tags: There are opening and closing tags. Tags contain information about the content included between these tags, or directions on what to do with it. Tags are enclosed between angle brackets, < >.
- Attributes: These often appear within the opening tag, and give more detailed directions on what to do with the content, such as indicating languages.
- Body (element): Content listed within the body tags are featured on the main window of the site.
- Head (element): This is included before the body element. It has information about the website. It’s often followed by a title element.
- Title (element): The content of this tag will show up in the top of the browser window, above the URL, instead of in the main page.
- Heading <h1><h6></h6></h1>: the heading tag assigns a size to the content in that tag. 1 is the largest and typically indicates main headings, while each smaller one indicates subheadings. These are important because search engines often look at heading size to figure out the importance of the content, so it can either hurt or help your findability.
- Bold: to bold words, you use the <strong></strong> tags
- Italics: for italics, you us <em></em> tags
- Superscript: <sup></sup>
- Subscript: <sub></sub>
- Paragraph: this is for use within the body tag. Paragraphs separate the information included into their own groups, away from other content of paragraph tags. <p></p>
- Line break: <br /> is a combination of an open and closing tag, because it doesn’t include any content. It just adds a line break.
- Break with a line: <hr /> is also a combination open/close tag, and it adds a line break with a line through it to help separate topics.
- Blockquote: <blockquote></blockquote>
- Quote: <q></q></li>
- Abbreviations: This will allow you to indicate what an abbreviation you’re using stands for, so if someone mouses over it a window will pop up explaining <abbr title=”title”>
- Inserting and deleting: to put a line through something you want deleted and have a replacement word appear beside it, use <del>word you want deleted</del> and then <ins>replacement word</ins>.
- Unordered lists: this will appear with a list title and indented list content below it, with bullet points beside them. <ul> list title <li>item 1</li><li>item 2</li></ul>
- Ordered lists: does the same as unordered lists, but assigns them numbers <ol>title<li>item 1 </li><li>item 2</li></ol>.
- URLS: The tag for a URL is <a href=”url”>the title for your link</a>.
- Linking to other sites—when doing this, you just include the full URL within the parentheses, are indicated above. These are called absolute URLs.
- Linking to pages with the same site—this is where you use what’s called a relative URL. Within the parentheses you indicate the file’s location: “index.html” if it’s on the desktop of your computer, or “site/index.html” if it’s within another folder.
- Images: <img src=”URL or file name” alt=”what will show up if the image doesn’t” title=”the title of the image” width=”size” height=”size” />
- Document type: This is what’s always included at the top of your coding to indicate the type of code being used. For HTML5, use <!DOCTYPE html></html></li>
- ID and class attributes: These can be added into, for example, the paragraph tag, to attach a tile to the content in that tag. This is useful for CSS, when you may want to make changes to one area of text, but not all. <p id=”titlewithnospaces”></p> </li>
- Block elements: these appear blocked together, like the paragraph element
- Inline elements: these appear within the content, like the italics and bolding.
- Div: these can block together multiple elements in one block.
Note on Images:For an image, you include either the URL (which can be found for any image online by right clicking on it and selecting “copy image location), or the location on your computer. The alt indicator will replace the image with a description of it if it can’t load for a user, the title will appear if someone mouses over the image, and the height and width are always good to include, because setting a specific size could make it easier to load. Typically, it’s indicated in pixels, but can also be in percentages and other measurements, too. Notes about images: The three main file types are .jpg, .gif, and .png. .jpg is very good when dealing with images with a lot of different colors, like photos, while .gifs and .pngs are better for images with few colors, or one colors, like logos or diagrams.
p {
Color: red
}
You write the element (or the selector), a space, a bracket, go to the next line and indicate the change (to font, color, background, etc) and end it with a semicolon, go down another line and close it with a closing bracket. Everything within those two brackets is considered a declaration. You can use paragraph, div, id, class, and h1-h6 as selectors. When using CSS as a separate document, you need to link the two. To do this, go to the head tag and type just after the closing bracket for title <link href=”filename.css” type:”text/css” rel=”stylesheet” />
