Learning HTML From Scratch – Part 2 – Attributes, Links and Images

In part 1 of this series, I started the basics of what HTML is and how html tags work. In this second part, I will go into more detail to show how to use tags with attributes on them to make links and include images in your html pages.

What is an attribute?

HTML tags can have attributes on them, which are simply named values that add additional details to the tag. An attribute on an html tag can specify a page to link to, an image to display, the placeholder text in a textbox, etc. They are included as part of the tag using the attribute name and value, as shown below:

[html light=”true”]
[raw]
<img alt="Blue Honda Accord" src="newcar.jpg">
<a href="http://www.microsoft.com">Microsoft</a>
[/raw]
[/html]

You have the name of the attribute, an equal sign, then the value in single or double quotes. If there is more than one attribute, they are separated with a space.

In the examples above, alt and src are attributes of the <img> tag, and href is an attribute of the <a> tag. Tags share some attribute names in common, but each tag often has some attributes that are specific to that tag. The individual attributes will be explained in more detail below.

Like the tag itself, the attribute names are not case sensitive, and they can appear in any order on the tag. The same attribute cannot be duplicated on the same tag.

Creating Links

While you would think the obvious tag to create a link would be the link tag, the tag used for links is actually the <a> tag. There is a <link> tag, but it serves a completely different purpose (it is used to include an external style sheet into a page).

Instead the <a> tag (for anchor) is used to create links to pages within your site, to external sites, and to places within the current page or another page.

The <a> tag’s main attribute is called href (which stands for hypertext reference). You use href to define the page or site that you are linking to. You put the label for the link (what the link says on the page) in between the opening and closing a tags. Here are some examples – note that all of these would go inside the <body> tag in your page:

[html]
[raw]
<a href="http://www.google.com">Google</a>
<a href="page2.html">Next page</a>
<a href="#top">Return to top</a>
[/raw]
[/html]

The first example links to Google.com. Since this is a link to an external site, you need to include the full URL including the http:// or https:// – you can’t just put www.google.com. Any time you link to something outside of the site your page is on, you have to use the full URL. Note: you can always use a full URL even for pages within your own site.

The second example links to another page in the same site with a name of page2.html. This is known as a relative path or link, which is explained in more detail here. Again, you can also use the full URL to the page instead (ie.. http://www.mysite.com/page2.html).

Finally, the third example links to a place in the current page called “top”. The # sign in front of the name indicates that it is a link to a place within the document. For more information on how to define places within a page to link to, see this.

Note: there is an attribute you can use to indicate that a link should open a new page instead of replacing the existing one. It is the target attribute. You use the “_blank” value to specify that a link opens up a new tab or window. For more information on target, see this.

Here is a sample page with some different links in it. It includes a tag you’ve not seen yet, which is <br>. It is used to put in a line break since HTML ignores line breaks in your html file. One of the links also uses target=”_blank” to open in a new window.

Note: <br> It is one of the few HTML tags that does not have a closing tag. It is used by itself to indicate a line break. You will sometimes see <br/> (which is a combined opening and closing tag), but <br> is perfectly valid and most common.

Adding Images

To add an image to a web page, you use the <img> tag. Like <br>, the <img> tag has no closing tag. Its main attributes are src (source), which specifies the name and location of the image, and alt (alternative) which provides alternate descriptive text for the picture that is important for accessibility purposes and as a placeholder while the image loads or if it fails to load).

Don’t confuse alt text with a caption – the alt text is not usually displayed. Unless the image is simply decorative, you should always provide alt text describing the meaning of the image.

Examples:

[html][raw]
<img src="http://www.commonchaos.com/wp-content/uploads/2011/07/happy-cat.jpg" alt="Happy cat picture">
<img src="cat.jpg" alt="another cat picture">
[/raw]
[/html]

Like links using the <a> tag, if the image is not on the current website, you must use the full URL to the image to include it, including the http:// or https://. This is shown in example # 1 above. It uses the full URL to the image on an external site.

In example number 2, only the file name was specified. The browser would look for the image in the same folder as the web page referencing it. The same rules about relative paths with links applies to images. More details on using relative paths can be found here. It’s simply a way to refer to a file that is in a different location on your site than the current page.

You can also combine a link and an image so that a link is opened when you click on an image. This is often used to show a smaller picture on a page, and link to a more detailed version. To do this, you simply put the <img> tag in between the opening and closing <a> tag with the link specified on it. Example:

[html light=”true”]
[raw]
<a href="largepicture.jpg"><img src="smallpicture.jpg" alt="Sunset at the beach"></a>
[/raw][/html]

I’ve created a sample page that shows this in action. It has a picture from an external site, a local image, and an image that is linked to another image. You can view the live sample here

The sample page uses the <h3> tag, which will be explained in an upcoming post on text formatting. It’s a heading tag that indicates the text in between is a heading. As a reminder, you can right click on the sample page in your browser and select View Source to see the HTML I used to create the page.

Summary

In this post, you built on what you learned in the first post about html tags and their use. You learned that attributes are settings on an HTML tag that give details like what picture to show, what page to link to, etc. You learned that the <a> tag, along with its href attribute, is used to create links to other pages, sites, and sections of pages. Finally, you learned how to show an image in a web page using the <img> tag along with its src attribute to specify the image to use and the alt attribute to label it. Combining both techniques, you also learned to add a link to an image.

As an exercise, try creating a page to display some of your favorite pictures. You can either use the full URL to them online, or save them locally and put them in the same folder with your html file and use their file name. Link one of the pictures to a site or a larger version of the same image.

Also try creating a list of your favorite web page links. Add a link for each site and give it a name (put the link text between the opening and closing <a> tags). Use <br> to separate each line. You can also try creating a second page in the same folder and linking to it using the file name of the new file you create (ie..page2.html).

In the next part we will cover some of the tags that help to format your text and give your page structure, such as headers, footers, etc.

Resources:

Attribute Reference (list of attributes for each HTML tag)
What are relative paths/links? (understanding how to use a relative link to a page or image)
W3 Attribute Specification (explains attributes and when to use single or double quotes)
Target Attribute of the Anchor Tag (explains the values of target on a link)
Alternative Text (understanding the importance of the ALT attribute for accessibility)
.

Learning HTML From Scratch – Part 1

Whether you want to be a programmer, a web designer, mobile app developer or get some other tech related job, having a strong knowledge of HTML is extremely helpful. Nearly all tech touches the Internet in some way, and HTML is the backbone of the entire web. Learning how to read and write HTML, even if you ultimately won’t work with it by hand , will provide a strong foundation.

At its most basic, HTML is just a specially formatted text file that describes how to display a web page. You can use simple text editors like Notepad or more sophisticated development tools like Visual Studio, Adobe Dreamweaver, Brackets, etc… to easily create and edit HTML files. I’ve included some links to some common editors at the end of the post. I’ve also included a link to an HTML playground page that allows you to edit HTML and preview the results in real time right in your browser.

It’s all about tags

Everything in HTML is made up of a tag. These are small pieces of text surrounded by brackets that describe to the web browser something about the document or what to display on the page.

Every HTML document (page) starts with the HTML tag, which looks like this:
<HTML> or <html> (tag case doesn’t matter).

Most (but not all) HTML tags have a closing tag that signifies when the tag ends. A closing tag is the same as the opening tag, but has a forward slash (/) after the first bracket, before the tag name. Just as the <html> tag starts a document, the </html> tag closes it. Not every tag has a closing tag, but most do. I’ll explain the tags that don’t have a closing tag in the future – but most that you will use do.

Some additional examples of tags (which I will define later): <strong>, <p>, <a>, <div>, <script>, <img>

I’ve included a link below in the resources to a full list of HTML tags for reference. I won’t be covering every one but they all work in a similar way.

HTML Is Hierarchical

An HTML document is processed from top to bottom. Tags are put between other opening and closing tags to create the structure of the page. Tags act as containers for other tags.

Every HTML page has two sections inside of the html tag. The first is the <head> section, and the second is the <body>. Note that blank spacing and line feeds are for readability – they are not necessary and are ignored by the browser.

Example:

[html light=”true”][raw]
<html>

<head>

</head>

<body>

</body>

</html>

[/raw][/html]

Notice that <head> and <body> are both inside of the <html></html> tags. Additional tags go inside of the <head> and <body> tags to create the page.

The HEAD Tag

The <head> tag represents the header of the document. Don’t confuse it with the header at the top of a page that contains menus and navigation. This section is not displayed on the page itself – it contains information about the document, such as the title, search engine keywords, character set, linked external files, etc..

The most common tag inside of <head> is the <title> tag. Whatever you put between <title></title> is what is shown in the title bar or tab in a web browser, and is also used by search engines. Example:

[html light=”true”]
[raw]
<head>
<title>Learning HTML From Scratch</title>
</head>
[/raw]
[/html]

That will set the page title to Learning HTML From Scratch. Notice that <title></title> surrounds the title, and that the title tag is inside of the <head> tag.

The BODY Tag

Unlike the <head> section, <body> is what is actually displayed in the browser. Whatever is inside of the <body> section is what is shown as the page itself in the browser. It is where the bulk of your tags will go. The contents of body are processed from top to bottom. Here is a sample:

[html light=”true”]
[raw]
<html>
<head>
<title>Sample html page</title>
</head>
<body>
<strong>Hello World!</strong>
</body>

</html>[/raw]
[/html]

This will show Hello World! in bold in the browser. The example contains one other tag – strong, which will be explained in more detail later. The strong tag makes text bold (you will also encounter pages that use the b tag, which does the same thing but has been deprecated in favor of the strong tag and using css styling for bold).

This is a web page at its most basic, but this is the basis for every web page. You can view the sample above as a web page here.

Summary of Part 1

An HTML page is just specially formatted text that a browser reads to display a web page. It uses tags to define the structure and details of the web page. A tag often has a corresponding closing tag which indicates where that tag ends. Every HTML page starts and ends with the <html> tag. Inside of the <html> tag, there are two sections – <head> and <body>. The head section contains information about the page, and the body section is the actual content of the page that gets displayed.

To experiment on your own, use a text editor and create a new file. Put in the html, head and body tags. In the head section, put a title between two title tags. In the body, put in some text and make some of it (or all of it) bold by surrounding it with the strong tag. Save the file with an .html or .htm extension, and then open the file in a web browser to see the results. Just go to the folder where you saved the html file and right click on it and select Open – it should open in your default web browser. You can right click on the page in your browser and select View Source to view the HTML.

In the next part, I’ll explain html tag attributes to create links, display images, and more.

Resources:

Notepad++ (Free text editor with HTML highlighting)
Brackets (Free code editor)
Visual Studio Code (Free code editor)
A list of all HTML tags (for reference)
Lightweave HTML Playground (for experimenting with HTML in your browser in real time)

Creating A Simple DisplayFor Template In ASP.NET MVC

When building web applications, the DisplayFor and EditorFor HTML helpers are extremely useful to quickly build pages from your model. However, sometimes you would like a bit more control over their display.

For example, by default, boolean fields show as a disabled dropdown with the value selected. I would prefer to simply output the value – true or false – as plain text.

In order to replace the template used, first create a folder inside of the Shared folder under Views called DisplayTemplates.

Then create a partial view file matching the name of the data type, in this case Boolean.cshtml

Inside the Boolean.cshtml file, add the following code:

[csharp]
@model Boolean?

@(Model.HasValue? Model.Value.ToString() : "")
[/csharp]

That’s all you need to do. Any views that use DisplayFor on a boolean will pick up the new format automatically.

You can do a lot more than what is shown here. This is a pretty good guide to creating simple and advanced EditorFor templates. The same concepts apply for DisplayFor, just a different folder (DisplayTemplates vs EditorTemplates):

Extending Editor Templates for ASP.NET MVC

Customize Title Bar Colors In Windows 10 WinJS Apps

In my previous post, I showed how to set the title bar color in Windows 10 C#/XAML apps. It’s easy to do the same thing in a Windows 10 Javascript app as well, the syntax is slightly different. I added this code to the main js file for the app (example: default.js), right before the app.Start() method call.

[javascript]
var titleBar = Windows.UI.ViewManagement.ApplicationView.getForCurrentView().titleBar;
titleBar.backgroundColor = Windows.UI.Colors.blue;
titleBar.buttonBackgroundColor = Windows.UI.Colors.blue;
titleBar.foregroundColor = Windows.UI.Colors.white;
titleBar.buttonForegroundColor = Windows.UI.Colors.white;
[/javascript]

That’s all it takes.

Customize Title Bar Colors In Windows 10 XAML Apps

Windows 10 apps can have customized title bar colors (for example, the Mail and Calendar apps) instead of the default white (or accent color in an upcoming Windows 10 update). Changing the title bar color in a Windows 10 XAML app is easy. In the constructor for your main XAML file (ie..MainPage.xaml.cs), you get a reference to the title bar from the ApplicationView object’s GetForCurrentView() method. You can then set the colors of both the title bar and the window controls by setting the properties:

[csharp]
public MainPage()
{
this.InitializeComponent();
var t = ApplicationView.GetForCurrentView().TitleBar;
t.BackgroundColor = Colors.Indigo;
t.ForegroundColor = Colors.White;
t.ButtonBackgroundColor = Colors.Indigo;
t.ButtonForegroundColor = Colors.White;

}
[/csharp]

That’s all it takes. You could easily implement user customizeable title bar colors for your app as well.