Lesson 1 | HTML Essential Training

To start the new school semester, I continued where I left off by beginning my new course HTML Essential Training on lynda.com.

I’ve been looking forward to these next courses because this will get more into understanding the basics of HTML and coding for the web.

The course instructor, James Williamson, first pointed out three core languages used for coding, and they include: HTML, CSSs and JavaScript. Though, Williamson said he believes the most important and essential one for coding is HTML.

lesson-1-core-languages

HTML deals with the essential structure of the webpage. Without out it, you basically have a blank page. CSS and JavaScript are both important, but they more for aesthetics and/or added content. CSS deals with the design of the page, while JavaScript dictates the behavior of the site.

For those aren’t familiar with HTML, this stands for hypertext markup language. This basically allows the use of tags to “mark up” content on a page to identify. Below are to basic examples of tags for the markup language.

lesson-1-html-tags

These tags are used to identify your content with a left-angle bracket followed by the character(s) (like “p” for paragraph) followed by a right-angle bracket. <p>

Next I went through some basic syntax using the paragraph tag to start off. The first time I use this tag in coding it’s called and opening tag. To end the paragraph I use a closing tag, which resembles an opening tag, but with one key difference of a forward slash. </p>

all characters located between <p> and </p> are called content, while the entire thing is called an element.

I also learned a little about “nesting” tags in the content to create an added design. For instance, I want to put an emphasis on a certain word, or group of words in the content, I will mark it up with <em> at the start and close it with </em>, but they must nest within <p> and </p> for this to take effect.

lesson-1-nesting

The same goes for using additional nesting tags.

lesson-1-nesting2

To get started with authoring a website, it is essential to have a code editor. Mac and Windows both come with very basic code editors (Text Editor for Mac and Notepad for Windows), but they are both very plain and may make it more difficult to read. When looking for a code editor there are some features that you may prefer like having numbered lines, code formatting options, syntax highlighting (I really like this feature), and code support for all languages.

Besides Text Editor I’ve only used Adobe Dreamweaver, which has all of these features. Williamson pointed to a code editor that he prefers called Brackets that is a free download. He showed a live feature that this program has that allows you to see a webpage preview as your editing the code. Like I said, the only other text editor that I’ve used is Dreamweaver, but I’m not too familiar with it because I don’t know if it has this same feature.

Advertisements