HTML: From None to Some

5/3/2017

HTML: From None to Some

Read Now

Written by David Kelly

I have two opinions regarding Web Coding:

It is a different language, and like any other language, you will only get out of it what you put into it, with regards to time, effort, and level of exposure. I believe there is equal importance between the use of proper grammar (HTML, CSS, and JavaScript syntax) and having an adequate vocabulary (element names, attributes, and accepted inputs). When all you can utter are sentence fragments with incorrect verbs (“bad” code), native speakers (web browsers) will only have a partial understanding of what you are trying to say, or just stare at you expressionlessly (blank screen). But, once you learn the basics, which is the hard part, you can get by and grow at you own pace or as needed.
Now is the best time to learn the essential web languages. HTML5 is the culmination of over two decades of millions of users wanting, and creating hacks to accomplish, a desired look for web pages, easily. By learning web coding now, you benefit from all the refinement and added functionality that has happened since the original 18 Tags in HTML 1 were created, around the year 1990. With CSS and JavaScript, which are the fashion designer and choreographer for HTML, you can make your webpage sing and dance. Plus, the availability and scope of open-source resources and examples is nearly endless, with many copyrights only requiring an acknowledgement for use of their code.

With that, I offer a few tips on basic HTML5 syntax and some keyboard shortcuts that will make the struggle a little easier. And I highly recommend spending some time at https://www.w3schools.com/html/; this is where I learned most of what I will share.

Organization:
Web coding terms like tag, element, block, article, section, and span all refer to a “container” that can be empty, or have any number of “containers” inside. Commonly referred to as nesting, web page organization is essential to correctly display text and images, and can metaphorically be described as a sandwich, a set of space-saving Tupperware, or a topographical map.

Where to start:
The first thing is to create a file with the .html extension. I found Notepad++ to be very helpful because it recognizes web code file types, and colors the text according to purpose.
The beginning of your code should:

State that it is HTML web code.
Begin the <html> document.
Create <head> section and close </head>.
Create <body> section and close </body>.
Close with </html>.

The <head> section:
Metadata and references are in the <head> section. The code in the head section is not displayed in the browser window, but is used for recording information and characteristic presets that can be accessed by the writer and user, alike. An example of metadata follows:

The <head> is also where “Internal” Cascading Style Sheets (CSS) code can be written for use by any of the webpage elements in the <body> section. You can predefine the text for headings, paragraphs, and links, as well as, the size, border, and spacing of your HTML containers by defining classes in a <style> section inside the <head>. All elements have default styles, so CSS in the head section is not needed for a page to display.

The <body> section:
This is where all the visible pieces of your web code go. The <body> is described with a left-to-right, top-to-bottom method; that can be measured in units of pixels or percentage. There are a few ways to arrange the content of your webpage:

From scratch with Block elements by defining boxes (<div>), headings (<h1> through <h6>), paragraphs (<p>), or forms (<forms>) and using Width, Height, and Inline CSS Style attributes (block elements begin a new line and use full width by default). An example of block elements, and of all example code displayed:

Or by using Semantic Block elements available in HTML5. An explanation from https://www.w3schools.com/html_layout helps, here is an image from their site:

There are many layout templates available, from basic to complex, and in numerous themes. But you need to have a little experience to change the template’s contents and make it your own. It can get complicated very quickly, so I recommend starting simple.
A good source for layout templates that use CSS is, again, w3schools: https://www.w3schools.com/w3css/w3css_templates.asp

Basic Syntax:
Now to some of the nitty gritty details of how each element can look.
<tag attr1=”value” attr2=”value” style=”prop1,prop2:value;”>content</tag>

Explanation:

Here is a cheat sheet of HTML5 element tag names and descriptions:
https://websitesetup.org/HTML5-cheat-sheet.pdf
W3schools has a nice reference site for tag names, attributes, colors, and everything HTML:
https://www.w3schools.com/tags/default.asp

Keyboard Shortcuts:
While working on web code, switching between windows and tabs is a constant, so here are a few shortcuts I used all the time:

Here is a link for more keyboard shortcuts from w3schools:
https://www.w3schools.com/tags/ref_keyboardshortcuts.as

4 Comments

Erin Miller

5/6/2017 08:10:29 pm

This is a great introduction to the basics of HTML web coding. I liked the way you put coding in terms of good grammar and vocabulary. The break down and explanation of the head, style and body as well as the additional semantic elements of HTML5 are helpful in understanding exactly what each component of the web page is and what you are trying to accomplish with each when you are writing code for that particular page section. Great info, thanks for sharing.

Adrienne Spitzer

5/17/2017 05:52:08 pm

I really like how you broke this down! It is really helpful and I feel a little less intimidated by HTML after reading through your post. I agree that it is a good time to start learning code because there are so many tutorials and help pages out there get you started and guide your efforts.

Haley Jones

5/18/2017 02:50:42 pm

Thanks David. Very clear and easy to understand. It can be really nice getting this kind of technical info from a fellow student, as opposed to reading online articles which can be overly complicated for beginners. I appreciate the links as well, and I'm looking forward to having some spare time to start studying on w3 schools.

eddie

5/28/2017 02:17:53 pm

I find coding hard to get started with but addictive once you understand a little bit of it. I also notice that there are many many guides to getting over that first hump of knowledge and this blog post is a good step in that direction.

HTML: From None to Some

Leave a Reply.

Author

Archives

Categories

Contact ME