Get going, Learn basic HTML
|
I wanted to shift gears with this post. I know I have talked about the basics before but I haven’t talked much about some of the pure essentials in details. Frequently people get overwhelmed when it comes to programming and particularly web development. As mentioned before there are three (3) fundamental portions of web technologies, HTML, CSS, and JavaScript. What I want to do is go deeper into each of the three components in a series of posts. HTML, Hyper-Text Mark-up Language, is the communication method for web pages. HTML is interpreted and rendered by web browsers such as Chrome, Firefox, Safari or Internet Explorer. HTML files traditionally end with a .html extension. Like Spanish, French, or English – HTML is a language that communicates to a listener (web browser) a message. HTML has syntax, or grammatical, rules that help individuals write clean, maintainable code that can be read by individuals and browsers. The main features of HTML are the elements, which are commonly referred to as HTML tags. HTML elements have names such as html, head, body, h1, p, and the a tag to name a few. (I’ll elaborate on several further in the post). Web browsers take this information, process it, and display it according to HTML elements present in the web page file. As a DIY, take a look at some HTML code by right-clicking on this web page. When the menu options appear, select ‘View Page Source’.
You should be able to easily see the a few common tags DOCTYPE, html, and head – the rest may be appear as gobbly goop.
What you see in Image 2 is HTML. A basic knowledge and understanding of HTML is almost considered essential in life at this point. There is such a high reliability for business and individuals to utilize the web as a vital part of their lives’, that equipping yourself with a surface level view is very beneficial – comparable to knowing some basic fundamentals of how a car works even if you are not a web developer. To dig deeper into the gobbly goop, and make it digestible I will explain a few concepts. So as we opened up the hood of the web page we saw the HTML. First, HTML uses a bracket system to identify a tag. Such as <html>. The brackets denote a keyword in the HTML language. As a part of HTML5 standards, most, HTML tags also come with a closing tag. So the opening <html> comes with a closing tag of </html> which represents that this element is complete. Imagine HTML as a structure similar to a sandwich. The main part, the bread, provides a bottom-piece ( the opening tag)and a top-piece (the closing tag). The bread may have attributes or types, such as wheat or sesame seeds. For this, HTML tags have attributes. In Image 2, the <html> tag includes the attributes lang=”en-US” . This is a language attribute that has the value ‘en-US’. This lets the browser know that this web page default language is the US Version of English. Pretty simple, right? Here is a list of some of the top HTML elements for your reference: <!– Comment –> – is a header tag for the largest heading. It is similar to the Heading 1 within <!DOCTYPE html> – although not an official tag, document type tag typically is the first item on an HTML page to let the browser know the document type. Before our <html> tag to <html lang=”en”> – is the starting tag of the HTML document and code <body> – the body element denotes the main portion of the page, usually content. <h1> – is a header tag for the largest heading. It is similar to the Heading 1 within Word. And can be used from h1- h6. Where 1 is a level of importance. <p> – is a paragraph tag used to contain content <div> – is a element used to divide sections of the site <a> – is an anchor tag used to link (hyperlink) to another page or section within page <img /> – is a header tag for the largest heading. It is similar to the Heading 1 within <strong> – is used to bold important content or show a strong emphasis. <em> – indicates emphasized content, where your content will show as italicized.
Let’s get started with a simple, hello world web page that does not require a web server, any special IDE, or a domain name. Open up a note pad document or your preferred text editor if you are not on a Windows machine.
Save the file as a ‘test.html’ on your desktop. Right-click on the file and open with your preferred browser. A few things you notice are the file icon may appear as a web browser icon, the indention in the file and it was pretty easy. The web icon may appear on your desktop since it has an .html extension versus a .txt extension or another file extension. Traditionally, developers indent to help organize and make the code more readable. And it wasn’t too difficult to copy/paste or type up the example into a text file. Congrats, that’s your first web page. From here, you can explore a few of the other tags and try it out for yourself within your sample file.
‘Got to have a thicker skin for it, this not for suckers’ – Havoc  Havoc and The Alchemist – Silent Partner  |
