There are some really great beginner HTML tutorial videos available online that can be of help even to the most novice developers.
So what makes a great HTML tutorial and what do you need to get started?
First, the video should be done well. The audio and accompanying visuals should both be clear and easy to understand. If it sounds like the audio was done in a cave or in a wind tunnel, that will be too distracting and you won’t be able to focus on what’s being said, if you can even understand it. And if important information on the visuals are too small, it won’t be of any help.
Second, the video should provide many examples, especially basic examples. If the video jumps right into some advanced activities, then the assumption is the viewer already has a basic understanding of HTML and thus the video is not a beginner tutorial.
Third, you should have a fast internet connection so that there are no hiccups in the video. Nor do you want to have to wait for 10 plus minutes for the video to load before you can play it. I personally have Verizon FiOS which I have found to be the best internet provider in my area. Depending on where you live, FiOS might also be available, or you might have to check out another provider. If FiOS is available, I would highly recommend it, especially if you can get a deal by using a Verizon FiOS promotion code.
Fourth, it is extremely helpful if the video provides a guide or any worksheets that can be saved to add notes for later. You don’t necessarily have to print anything out, but it’s nice to have the guide as a reference for later instead of having to restream a video.
Fifth and finally, look for a video that is part of a series. If you find a video you like and it’s part of a series, then it’s easy to progress to more advanced videos without taking a lot of time to find a new set of videos.
Formatting your blog posts is an absolutely essential part of connecting with your readers. It also allows you to more directly and swiftly deliver information to them in the form of things such as links sometimes. That’s why it is important to understand which tags are the most popular HTML formatting tags and therefore which are the most expected and familiar to readers in a blog post.
Anchor tags (<a href=”…”></a>) are the hands down most common for formatting in a blog post. They allow the poster to provide an easy way to link another relevant page and can spur reader interest as they are also the most widely recognized tags by blog readers. One tag can have blog visitors reading not only the initial post, but reading other posts and pages of relevant information for hours on end.
Breakline tags (<br>) insert a single new line anywhere in the text. They exist in order to break up thoughts of a blog writer into paragraphs and thus make it easier for a reader to actually read. These types of tags are especially important because it allows a reader to pick up focus where they left off in the case that they leave the page to read a link. Other related tags are the <p> and <span> tags.
Lists (<ul>…</ul>, <ol>…</ol>) provide yet another way to format information. The reason that these are popular tags among bloggers is the fact that they allow for both bulleted and numbered elements (<li>….</li>) to be listed in an easy to read manner. They allow the blog writer to list short, concise blog points either to support an argument being made in the blog post or to provide a succinct list of information.
Image tags () provide a way for bloggers to let blog readers see images in posts. It can be a subtle way to engage readers, provide an overview of the blog post’s content at a glance, or it can provide an image that compliments that blog post, such as a political cartoon in a blog post about a political subject.
Strong (<strong>…</strong>), italics (<i>…</i>), underline (<u>….</u>) and strikethrough (<s>…</s>) are all known as style tags. These allow the blog writer to quickly add meaning to his or her words and thus add personal insight into what the writer is trying to either mention or is thinking at the moment of writing. It should also be noted that the first tag, strong, is typically used as a replacement for the older bold (<b>….</b>) tag, because the former represents a conscious choice in HTML design and states that the writer wants to emphasize certain words. Making careful use of strong tags can help search engines better know what your posts are about.
Header tags (<h1>…</h1>, <h2>….</h2>, …) all represent another sort of logical sorting. They allow a blog writer to break down his or her thoughts in a way that a list wouldn’t normally allow. It should be noted that in order to get the most effect from header tags, they should break down content into sections. Think of the proper use of header tags like breaking down a recipe into the “ingredients,” “steps” and “serving directions” sections.
Blogging is an incredible way to spread both knowledge and ideas to a wide, diverse audience. It is also a great way to build authority and trust with an audience of users. Blogs themselves can become very diverse in the way that they both look and feel to readers, but it’s what under the hood that counts the most. The blog platform that bloggers use dictates both how posts are made, formatted and sometimes even when they are posted and who can follow the posts. Below is a brief look at the three most popular blog platforms in use by bloggers today.
Blogger is a free, blogging platform owned by Google. It is by far the most popular solution but does come with a few drawbacks that will be addressed later. The platform itself provides an incredible ease of use for first time bloggers and a near instantaneous setup for the more experienced type of user. All a blogger account requires is a Google account.
Some major features of Blogger include the wide variety of templates that are easily accessed, drag-and-drop editing in a post, geo-tagging of individual posts for blogs, where that is pertinent, and the ability to publish from a wide variety of tools. Blogger’s WYSIWYG editor makes it possible to copy formatting done in Open Office, Microsoft Word and even Google Docs over to a blog post by simple copy and paste.
The major drawback to Blogger is that some people may find it “cheesy” and perhaps even cheap looking. This can generally be remedied by buying a proper domain name for your blog and finding a template that looks decent.
Wordpress is an incredibly dynamic blogging platform that comes in the two following main options: WordPress.com and a standalone PHP software installation that can be installed on any server which supports PHP4/5. The major difference between the two is that WordPress.com is a lot like Blogger in that it is a free blogging platform and doesn’t allow you to add any extras save for what the website provides. An installation of WordPress on your own server will let you install any of the wide variety of plugins into your blog.
That being said, WordPress.com still has some neat features that make it worth using. The editor is simple and easy to use, and posts can be scheduled at any time. People with a WordPress.com account can follow your blog and posts. The part that makes WordPress.com really shine is the fact that it allows for you to see the statistics of each individual post, page and link.
Tumblr is a different type of blogging platform that acts more like a “new style” of blogs than the previous two. It feels more like traditional blogs hybridized with Twitter in that it allows for both lengthy, detailed posts and very short posts that may consist of simply an image. Posts can be scheduled for any time, and the WYSIWYG editor is fairly user friendly. The main feature that makes Tumblr worth using is that people with Tumblr accounts can not only follow you, but like your posts and even reblog them. This added ability to do so can provide a viral boost in your readership if you post something particularly appealing.
HTML stands for Hyper Text Markup Language which is basically a language for writing web pages. It is not difficult to create a simple webpage, and it can even be fun. HTML is the most basic form of web page writing. It is not a program designed to aid the user in creating a website, and it is not even a styling tool. It is simply the language that the web browser, such as Internet Explorer, Safari, or Google Chrome, reads.
HTML documents should be written in Notepad or a similar word processor. Do not use other writing documents, such as Microsoft Word, as they save your text with various characters that will be difficult to eliminate later. When saving your HTML document make sure to always do the following two things:
- Always save your HTML documents in the same folder. The reason for this is that the web browser will only look in that one folder for your documents, pictures, etc.
- Always save your HTML documents with simple titles, so that you will easily know what is on each page without having to open the document, such as title page, about us page, history of, contact us, etc.
When you are writing HTML, imagine that you are having a conversation with the web browser. All of the information that you want the web browser to read will be included in this HTML document. All of the visible information will be typed just like you are reading now. The invisible information will be typed between brackets which will give the web browser instructions on how to present your information correctly. A simple HTML Document would look like this.
My First Web Page </title>
Though this web page may be simple, it helps you to understand the very basics of HTML, so that you feel confident to do some research on your own, and so that you’re not afraid to try it out.
Above is a simple HTML Document that once saved would open up a web browser, and you would see what is between the title tags and the body tags. There are many html tags that are used in the development of a web page, but as you can see here, the entire document is surrounded by </html> tags which tells the web browser that this is in fact an html document. Every tag shown in this example has both a start tag (such as <head>) and an end tag (such as </head>). Most HTML tags have both a start and end tag, though there are few exceptions. The words between the </title> are what you would see as the title of the web page.
If a tag is not typed correctly, a web browser would not know how to present the information, and therefore you would end up having a messed up page. Tags give you the ability to add pictures, change the size, font and location of the text. Tags allow you to put text in boxes, put links to other pages on your own website or even links to other websites. There are many tags that all have their own unique meaning. This is a good starting point for someone seeking to learn HTML, but don’t stop here.
Hypertext Markup Language, or HTML, is the main ingredient in web pages and works by itself to form a page. It is not so much a programming language as it is a markup language to describe the elements contained within a web page. It defines properties of the web document, the hierarchical structure, and can place emphasis on key words and phrases. It can link one document to another. HTML also represents a method to essentially name and identify elements, as well as give them classes that can be complimented by other languages. For complete beginner’s, HTML can be rather confusing.
Now that you know what HTML cannot do, look at what it can do. It can be used to build the framework for a page. A fair analogy of how HTML works is it is like a carpenter trying to frame a house. Boards, nails, screws and shingles are relatively interchangeable, as is the concept of a house. The only thing that is different between houses is how they are built.
The body is what the person sees when they peruse through the page. It contains both the structure, much like the earlier house example, and it contains any readable text on the page. The body portion of an HTML document logically defines what elements should be grouped inside of what elements. This grouping is also known as the hierarchical structure.
Common layout elements for HTML include tables, paragraph tags and semantic tags. Tables describe a logical layout that specifies a spreadsheet-like structure for data to be displayed. Paragraph tags are meant for large bodies of text. Semantic tags, such as div and span, have no meaning except to logically group text together. Their usage is less important in pure HTML and more significant when combined with other languages.
Each element carries with it the ability to define attributes. These attributes help to distinguish what an element does and how it looks. It can also be used to define what the name and type, or class or an element is.
There are also other interactive elements not covered in this brief overview of what HTML is. There are forms, which can be used to collect data from a user, and other tags which describe the composition of a page.
For an example of the simplest, valid HTML page that a beginner can code, see below. If you would like to test this page out by yourself, save it somewhere on your computer as a document ending in “.html”, and open it with your web browser.
<title>This is your title element and will be displayed on the title bar of your window.</title>
<h1>This is a main header and helps to mark up what the following text is about.</h2>
<h2>This is an example subheader.</h2>
<p>This is a text paragraph. Most browsers automatically indent this.</p>
What Does HTML Do?
In the past, HTML was used to create both the structure and style of web-pages. HTML tables have been a popular way to organize content on a web-page. However, with the advent of CSS, web-designers began writing less and less about the appearance and layout of a web-page in HTML. Instead, the HTML now concerns itself with the structure of the page, arranging its content into various elements such as paragraphs, headings, lists and tables. These elements can then be styled by the CSS, which can either be written directly into the HTML file, or linked to in a separate file using a special tag. This second method is advantageous, because it allows one style sheet to be used for multiple pages. This could not be done using only HTML to design a website.
How Does HTML Work?
HTML works by using special markers called tags. Angle brackets <> are used to identify these tags. They tell the browser how the information between them is to be displayed. Most tags come in pairs. The first tag is an opening tag, indicating the beginning of the tags effect, and the second is a closing tag, ending the tag’s effect. A forward-slash is used to indicate a closing tag. For example, the HTML to create a large heading would look like the following: <h1>. This is a Heading</h1>. Other tags, like the line break, are self-closing <br />. One of the easiest mistakes to make when writing HTML is forgetting to match opening tags with their closers.
What is HTML5?
The latest HTML standard has many interesting features. While it adds new tags, some of the tags in HTML 4.01 are deprecated, replaced or gone entirely. Some of these tags, such as the <font> tag, are related to style. Their removal forces designers to use CSS instead of continuing to use legacy design methods. However, the new standard appears to be more friendly to the use of multimedia, which is an important aspect of modern web-design.
9xhtml is a fast and easy template slicing service for busy web developers and designers; we transform your template/design into valid XHTML and CSS based on web standards so you can carry on building your website.
- Valid CSS & XHTML
- Semantic & Compliant XHTML
- Cross browser compatibility
- SEO structure
- Well structured CSS
- Optimized and sliced images
- Convert to standard Joomla or WordPress themes
First, you will have to send us your design files in any graphic file format: png, psd, jpg, ai, bmp or archive zip, rar, etc.Then we will slice it and code it into valid xhtml/css in just 2 business days.In the end, we will send you the completed xhtml, css, and image files
We offer design services as well. If you’re interested, just shoot us an email at[email protected]