HTML stands for HyperText Mark-up Language, and it is the language of coding. Although it’s akin to a foreign language, it’s not nearly as difficult to learn as, say, French or Mandarin. Once you know the basics, the World Wide Web is yours.
Where to Write Code
Image via Flickr by hackNY
You have to code somewhere. In the beginning, a standard word processing program will work. Choose Notepad, Word, OpenOffice, or whatever software you prefer. Whatever you use, remember to save your coding as plain text, and use the file extension .html or .htm when you name your file (for example, code.html).
Start with Structure
A website contains one or more Web pages, and every Web page begins with <html> (no spaces). Start with <html> and at the end of all your coding, finish up with </html>. The “/” is a small but integral part of coding. It closes your commands. Use it to close every tag.
The Web page heading follows. Use it to tell visitors what your page or site is for and what they will find there. The <head> code comes just after your <html>. Your title might read as “<head>Bill’s Guide to Basic Coding</head>.”
Next comes the basic body of your Web page. Your example might say, “<body>I’m building a how-to guide for coding.</body>,” although you can make it as long or short as you like.
To learn more about structure, tags, and attributes, Codecademy is a great resource and a solid example of how to create a website that’s easy to read, well-designed, and attractive, but functional.
Basic Additions
As your Web page stands now, you can type its location into your web browser and see what it looks like locally. It’s clean and concise but not very interesting, right? A few basic additions will change that.
Headers help break up the text. They announce new ideas or subheadings, which is helpful on About pages, in blog posts, and on front pages. The header tag is <hX>. You can replace the “X” with numbers 1-6. Header 1 is the largest, header 6 is the smallest.
Paragraphs break up walls of text as well. As you’re writing the body of your Web pages, use the paragraph tags <p>. It keeps things neat and tidy. You can use the <br> tag to create a line break.
At some point, you’ll also want to add links. Linking uses the HREF tag. At the basic level, you use this code to create a link: <a href=”targeturlofchoice”>Anchor text for link</a>. For the anchor text, you might choose the title of the page to which you’re linking or create your own keyword or phrase. You can also create links to subpages within your website.
The Being Wicked page highlights what you can do with well-placed links, strong text, and featured subpages. It’s also proof that it’s possible to create a simple website that isn’t boring.
Formatting Knowledge
- Formatting makes all the difference, but it’s easy. There are endless formatting tags, but you’ll only need a few as you begin your adventures in coding:
<i> or <em> for italicized text - <b> or <strong> for bold text
- <u> for underlined text
There are tags for strikethrough, subscript, and superscript, but those are more advanced and shouldn’t come into play as you begin.
Adding Images
Images and videos make websites more interesting. Pictures begin with the <img> tag, but you don’t need a closing tag. When inserting an image, you need to set parameters for the margin, the attribution, the size, and any alternate text. If you have a photo of someone working on the computer, it might look like this:: < img style=”margin: 5px; float: right;” alt=”Coding in Action” src=”image/path/coding-in-action.jpg” width=”500″ height=”400″ />
The margin means there are 5 pixels of open space around the picture. The float aligns the image to the right. The alt is the name of the image. The src is the page or address where you’ve stored the image. The photo is 500px wide and 400px high.
Finding Inspiration
When getting started with coding, it can be easy to get frustrated and lose track of the bigger picture, which is the finished look of your website. If you find you’re getting tired of the intricate process of creating a working website, try visiting well-established sites to help you find some inspiration and perspective on what your new skills can accomplish.
When looking for latest innovation in site design, the gaming industry is well known for user experience optimization, sites like Full Tilt are great examples of websites that have recently updated their site design to be inline with user-friendly formats that make excellent use of a variety of techniques you have just learned how to do. Both of these sites hit on several key points such as:
- Organizing different categories and areas
- Utilizing a drop-down menu for easy navigation
- Maintaining a user-friendly interface
- Incorporating a search bar to help consumers find what they are looking for
Take a break from your coding creation every once in a while and check out successful sites like these to help keep your website looking fresh and current.
Get Help
The basics of coding aren’t hard to learn. Just remember the following key points:
- Use a text editor
- Use the correct structure
- Include additions such as header and paragraph coding to break up the text
- Format the text
- Add images
From this point, you can learn how to create divisions, sidebars, search boxes, and other navigational tools. You can change the background and text colors and add header images or logos. Start at the primer level, get comfortable, and then grow your knowledge.
Once you’ve got the fundamentals, you already know how to create a basic website. So, have you opened Notepad yet?
The post Coding: Everything You Need to Know to Create Your Own Website appeared first on Jafaloo - The Tech Blog.