#HTML #Geek #WebDesign #Blogging #Simple #Easy #StudySunday #HowTo #Learning #Education #Computing
Web Design sounds pretty complicated, but it doesn't have to be. Today, tools like Wordpress and Blogger make it easy for someone with little to no knowledge of HTML to own and update a working website. However, it's still good to know a little about the coding language your web pages run on. It can make things a lot easier!
The first thing you should know about HTML (which stands for HyperText Markup Language) is that it's all plain text. Text effects like line breaks, fonts, and extra spacing are ignored, and images can't be directly placed in the .html document. If you want any of these effects when you use HTML, you'll need to use HTML code to add them. When you write HTML, you're basically telling the computer where to find your content, and how to display it on the page.
HTML code is made up of Tags and Attributes. A Tag consists of a command within a pair of < > brackets. An Attribute is an extra command that goes inside the Tag, and further defines what that Tag does. Content such as text usually goes between tags, like this:
An example of Tag and Attribute placement: <tag attribute="specifications"> content goes here </tag>
Most Tags require a Closing Tag (as seen above) to be placed after the content they're intended to effect. A Closing Tag is just a repeat of the original tag, without any attributes, that begins with a forward slash / inside the brackets. You can think of a Tag as switching an effect on, and a Closing Tag as switching an effect off.
Sometimes, a Tag doesn't need a Closing Tag, but instead closes itself with a forward slash at the end, before the last bracket. This is common for one-time commands like inserting an image, or creating a new line. Any attributes within such a tag will go before the slash.
A Tag that closes itself: <tag />
Finally, HTML Tags are nesting; which means that if you want to use more than one Tag, you'll have to put one inside the other. A good example of this is creating bold-italic text. The <b>...</b> tag produces bold text, and the <i>...</i> tag produces italic text. Therefore, to make bold-italic text, you would need to use both tags, one inside the other. Using <b><i>...</i></b> will work, but <b><i>...</b></i> will not.
Right: <tag1><tag2> content </tag2></tag1>
Wrong: <tag1><tag2> content </tag1></tag2>
Keeping these basic rules in mind, we're ready to learn some easy HTML code.
Adding Elements
Add a Link: <a href="URL of link" target="_">Link Text</a>
The Link Text is the only thing that will be visible on the finished page. Whatever you place there will become a link. You can even place this tag around an image tag to make the image a link.
The target="_" attribute causes the finished link to open up in a different tab, instead of replacing your current tab. It may be omitted.
Add an Image: <img src="URL of image" height="desired height" />
The height="..." attribute is used to scale your image, and may be omitted if you want your image to stay its original size. You may specify your desired height in the number of pixels, or percentage of the section it's placed in. You may also use a width="..." attribute in the same way.
Add a Horizontal Line: <hr />
This creates a horizontal rule that spans the section it was placed in.
Managing Text
Make a New Line: <br />
This Tag makes the content following it appear on a new line, in the finished page.
Make a Paragraph: <p>Content</p>
The content between these Tags will begin on its own line, and begin a new line immediately after it ends. The first image in the first paragraph within a web page is also more likely to be picked up as a thumbnail image by Facebook.
Make a Headline: <h1>Content</h2>
Produces large text, on its own line, as in a headline. <h1>...</h1> is the largest available headline. For smaller headlines, you may use larger numbers, such as <h2>...</h2>, <h3>...</h3>, etc.
Arranging Content
Use a List: <ul><li>List Item</li><li>List Item</li></ul>, <ol><li>List Item</li><li>List Item</li></ol>, and <dl><dt>Title</dt><dd>Definition</dd></dl>
There are three kinds of list; the Unordered List, <ul>...</ul>, which produces a bulleted list; the Ordered List <ol>...</ol>, which produces a numbered list; and the Definition List, <dl>...</dl>, which produces a Title, and an indented Definition.
Example:
- List Item (Unordered List)
- List Item (Unordered List)
- List Item (Ordered List)
- List Item (Ordered List)
- Title (Definition List)
- Definition (Definition List)
Use a Table: <table><tbody><tr><td>first row, first division</td><td>first row, second division</td></tr><tr><td>second row, first division</td><td>second row, second division</td></tr></tbody></table>
Tables arrange content in rows of divisions. The <table><tbody>...</tbody></table> Tags begin and end the table. The <tr>...</tr> Tags begin and end each table row. The <td>...</td> Tags begin and end each table division within the rows.
Example:
| first row, first division | first row, second division |
| second row, first division | second row, second division |
Use a Division: <div>Content</div>
Creates a Division of content and code. Without attributes, it appears similar to the <p>...</p> Tag. This may not be extremely useful, at first, but there are many attributes which can be added to the <div>...</div> Tags that affect the color, style, and arrangement of the Division. Most CSS, for example, is connected to Divisions.
Thank you for reading! If you enjoyed this article, you may also like to check out some of my other posts. Here's what I recommend now:Free CSS Cheat Sheet -- How to Use Cascading Style Sheets
Jvloggers! Three Awesome Youtube Channels About Japan
Star Wars The Old Republic, Roleplayers' Survival Guide
No comments:
Post a Comment