Sometimes we need to take a step back and reacquaint ourselves with the various aspects of programming languages. Computer programming languages allow us to give instructions to a computer in a language the computer understands. Just as many human-based languages exist, there are an array of computer programming languages that programmers can use to communicate with a computer.
This blog is the first in a series of how-to’s on different programming languages. These blogs will define the language, outline basic functions and usability, while providing instructions on basic coding techniques for the selected programming language.
For the first adaptation, we will be covering HTML.
HTML stands for HyperText Markup Language (** What is the correct way to say this? Seeing multiple versions … Hyper Text, Hypertext, HyperText – please advise for consistency moving forward). It is a core component to front-end development and often the first language learned by designers and web developers. In layman’s terms, HTML is the skeleton of a website; it provides structure to the pages content (text, images, videos). At its heart, HTML is a fairly simple language made up of elements which can be applied to pieces of text to give them different meaning in a document.
The language was first developed in 1990 by Tim Berners-Lee and was used to create and transmit electronic documents amongst learning institutes across the world. Since it’s inception, HTML has evolved significantly and is currently on its 6th iteration: HTML5.
HTML Basics and Structuring a Web Page
HTML is widely considered a simple language to learn. There is a boundless array of free resources available on the internet and the only requisites are a basic computer setup and a text editor. All HTML documents must start with a document type declaration. Additionally, HTML documents will follow a universal structure. The following elements compose the foundation of a web page.
- The <!DOCTYPE html> is the document type declaration which defines the document as HTML5.
- The <html> element is the root element of an HTML page
- The <head> element contains meta information about the document
- The <title> element specifies a title for the document
- The <body> element contains the visible page content
- The <h1> element defines a large heading
- The <p> element defines a paragraph
Additionally, most HTML elements will be enclosed by a pair of tags: an opening and closing tag.
- An opening tag <h1> tells the text editor that a specific function will manifest due to the occurrence of the tag.
- The closing tag </h1> tells the text editor to complete said function.
An example of opening and closing tags would look like this:
<h1> Code Authority is a custom software development agency </h1>.
The opening tag <h1> tells the text editor that the following content is designated as an H1.
The closing tag </h1> indicates to the text editor that that is the end of the H1.
HTML Formatting 101
HTML language can format the appearance of the text on your web page. This can amplify the look of the web page and make it more appealing to viewers, however, too much variety in the text formatting can also look displeasing and may deter a viewer from reading your content or continuing on your page.
Defining text – HTML defines special elements for defining text with a special meaning. For example, HTML uses elements like <b> and <i> for formatting output, like bold or italic text. Other common formatting functions include:
- <strong> – Important text
- <em> – Emphasized text
- <mark> – Marked text
- <small> – Small text
- <del> – Deleted text
- <ins> – Inserted or added text
- <sub> – Subscript text
- <sup> – Superscript text
- <u> – Underline text
Fonts – Additionally, you can change the actual font on your page in a variety of ways:
Font Color – <font color=”#??????”> </font>
Change the color of a few words or a section of text. The 6 question marks represent the hex color code, see this list of colors and codes for some samples
Font Size – <font size=”?”> </font>
Replace the ? with a number from 1 to 7 to change the size of the font. One being the smallest and seven the largest.
Font Size Change – <font size=”+/-?”> </font>
For an immediate change of font size with respect to the font size preceding it, this tag increase or decreases the size of the font by the number you specify.
Change Font Face – <font face=”?”> </font>
To show text in a particular font, use the font name such “Helvetica” or “Arial” or “Courier”. Be aware that using some fancy font from your computer means that the person viewing that page must also have that font installed on their computer too, otherwise it will look totally different to them.
Intermediate HTML Elements and Attributes
Here we will define and provide examples to a few elements and attributes you can include in HTML documents.
Headings – HTML headings are defined with the <h1>, <h2>, <h3>…<h6> tags. The <h1> tag is the most important and each subsequent header element is less significant.
- <h1> Will Look Like This
- <h2> Will Look Like This
- <h3> Will Look Like This
- <h6> Will Look Like This
Some important items to note when it comes to headings:
- Users looking at a web page tend to scan quickly to find relevant content, often just reading the headings to begin with (we usuallyspend a very short time on a web page). If they can’t see anything useful within a few seconds, they’ll likely get frustrated and go somewhere else.
- Search engines indexing your page consider the contents of headings as important keywords for influencing the page’s search rankings. Without headings, your page will perform poorly in terms of SEO (Search Engine Optimization).
- Severely visually impaired people often don’t read web pages; they listen to them instead. This is done with software called ascreen reader. This software provides ways to get fast access to given text content. Among the various techniques used, they provide an outline of the document by reading out the headings, allowing their users to find the information they need quickly. If headings are not available, they will be forced to listen to the whole document read out loud.
Lists – There are two types of lists, ordered lists and unordered lists. Unordered lists start with the tag <ul> and individual list items are denoted by <li> tag. Ordered lists are denoted by the tag <ol>. Of course, following proper HTML syntax, we must include a closing tag to indicate the end of each element. An example of a list is shown below:
Links – HTML links are hyperlinks that allow you to navigate to another web page or document. A link does not have to be text, it can be an image or any other HTML element. However, the proper syntax for an HTML link is as follow:
An example of a link could be:
<a href=https://codeauthority.com> Visit our Website </a>
Images – Adding images can improve the design and the appearance of a web page – just like picture books we remember from our youth, they tell a story. Images improve your site’s user experience and, at the same time, gives your SEO a bump.
In HTML, images are defined with the <img> tag. The <img> tag is empty, it contains attributes only, and does not have a closing tag. If you are referencing a photo from the web, the src attribute specifies the URL (web address) of the image:
<img src=”url“>
The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). The value of the alt attribute should describe the image:
<img src=”img_Napa.jpg” alt=”Grapes in Napa”>
Image style, width and height – The width, height, and style attributes are valid in HTML5.
You can use the style attribute to specify the width and height of an image.
<img src=”img_girl.jpg” alt=”Girl in jacket” style=”width:500px;height:600px;”>
Or, you can use the width and height attributes:
<img src=”img_girl.jpg” alt=”Girl in a jacket” width=”500″ height=”600″>
You can also use images in HTML language from:
- Images in another folder/sub-folder
- Images on another server
- Animated images
- Images as a link
- Floating images
- Image maps with clickable areas
- Background images
… and so much more
What’s New In HTML5
HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts. It is a new version of the language HTML, with new elements, attributes, and behaviors, and a larger set of technologies that allows the building of more diverse and powerful web ites and applications.
New elements introduced with HTML5 include:
- Semantics: allowing you to describe more precisely what your content is.
- Connectivity: allowing you to communicate with the server in new and innovative ways.
- Offline and storage: allowing webpages to store data on the client-side locally and operate offline more efficiently.
- Multimedia: making video and audio first-class citizens in the Open Web.
- 2D/3D graphics and effects: allowing a much more diverse range of presentation options.
- Performance and integration: providing greater speed optimization and better usage of computer hardware.
- Device access: allowing for the usage of various input and output devices.
- Styling: letting authors write more sophisticated themes.
There is a whole world of programming languages out there waiting to be utilized. Some you can pick up in just a few short lessons and be on your way to developing your own web page. But other times, we want to turn to the professionals to take this task over, ensuring it’s done right. That’s where Code Authority excels. Our web design and web development service teams know that when people visit your website, that first impression has to “wow” them with an aesthetically-pleasing web design. And, it has to work flawlessly. From the language used to create it to the images and functionality, we take every aspect of the design process into consideration and make your vision a reality.
Let us take a look at your current website with a free evaluation or contact us to discuss creating a brand new website that truly represents you and your brand.
