{"id":1255,"date":"2018-04-17T10:16:49","date_gmt":"2018-04-17T10:16:49","guid":{"rendered":"https:\/\/firstsiteguide.com\/html-for-beginners\/"},"modified":"2023-10-04T00:50:15","modified_gmt":"2023-10-04T00:50:15","slug":"html-for-beginners","status":"publish","type":"guide","link":"https:\/\/firstsiteguide.com\/html-for-beginners\/","title":{"rendered":"HTML Tutorial for Beginners"},"content":{"rendered":"
If you want to become a webmaster and learn how to create a website<\/a>, you may find the prospect of getting to grips with HTML quite daunting.<\/p>\n\n\n\n This is something that cannot be avoided, however, as the vast majority of website landing pages that you visit will have been written and structured using HTML elements. In fact, HTML is now used by more than 74% of all known websites<\/a>, while this language also helps to enhance everything from the design of your site to the quality of the content that it features.<\/p>\n\n\n\n In this guide, we will explore the basic principles of HTML and its potential applications, before looking at examples of the individual elements that you use when coding your website.<\/p>\n\n\n\n In simple terms, HTML represents the standard markup language<\/a> for creating web pages online. It stands for Hyper Text Markup Language, and its most primary function is to establish the structure, layout and presentation of individual landing pages. While web browsers do not directly display HTML language, it plays a pivotal role in helping to create a visible, accessible and easy to use site.<\/p>\n\n\n\n HTML is also underpinned by a number of individual elements, which gradually build web pages, structure the presentation of content and bring your website to life. These elements are created and contained within \u2018tags\u2019, which define alternate pieces of content such as headings, paragraphs, and similar examples.<\/p>\n\n\n\n We will explore these elements and their construction in further detail below, while also looking at how they can be personalized to introduce color, links, and variable typography to your website.<\/p>\n\n\n The Timeline of Web Technologies<\/strong>:<\/p>\n\n\n\n Popular websites using HTML<\/strong>:<\/p>\n\n\n\n As we can see, the most common application for HTML is the design of the individual landing pages that make up your website. This is not the only application of the popular coding tool, however, understanding its additional uses will help you to get the most from the language as a new webmaster. So, here are some of the further ways in which HTML can be applied:<\/em><\/p>\n\n\n\n Before you can build out an HTML page, you need the basics in place.<\/p>\n\n\n\n Typically, a page will be made up of three structural elements:<\/p>\n\n\n\n Here\u2019s what those basic structural elements look like when they come together:<\/p>\n\n\n <html><\/p>\n\n\n\n <head><\/p>\n\n\n\n You can put text or code here, like a <\/head><\/p>\n\n\n\n <body><\/p>\n\n\n\n The main body of your page goes <\/body><\/p>\n\n\n\n <\/html><\/p>\n\n<\/div>\n\n\n Here\u2019s another example, using header tags and the paragraph tag to structure content aesthetically. Plus, we\u2019ve thrown in a footer tag for content below the main body of a page:<\/p>\n\n\n <html><\/p>\n\n\n\n <head><\/p>\n\n\n\n You can put text or code here, like a <\/head><\/p>\n\n\n\n <body><\/p>\n\n\n\n <h1>My First Heading<\/h1><\/p>\n\n\n\n <p>Welcome to mywebsite!<\/p><\/p>\n\n\n\n <footer><\/p>\n\n\n\n <p>contact information could go here<\/p><\/p>\n\n\n\n <\/footer><\/p>\n\n\n\n <\/body><\/p>\n\n\n\n <\/html><\/p>\n\n<\/div>\n\n\n The starting point for any HTML code is individual tags, which can be used to create all crucial elements and help to structure your web pages. <\/p>\n\n\n Leading HTML Tags technologies Share on the web<\/strong> <\/p>\n\n\n\n Below, we will take a look at the most common tags before we explore how they can be leveraged to generate specific, on-page elements:<\/p>\n\n\n\n All online documents, including web pages, begin with a heading. These are constructed using HTML tags, with the language currently allowing for up to six variably sized elements that also enable you to structure your content with additional titles, subtitles and highlighted lines of bold text. To start your heading, you simply prefix the relevant text with the <h1> , <h2> , <h3> , <h4> , <h5> or <h6> tag depending on the desired size.<\/p>\n\n\n\n You must then apply a closing tag at the end of the heading to encapsulate the text, and will be displayed as follows in HTML format:<\/p>\n\n\n Once confirmed, this will translate into the following aesthetic on your website\u2019s landing page:<\/p>\n\n\n Here, the various sizes of the variable headings are clear to see, as is the fact that the browser adds a line before and after the heading. You will also notice that the closing tag at the end of the heading text has a slightly different aesthetic, but will cover this in the following chapter as we look to use tags to define specific elements.<\/p>\n\n\n\n A similar principle is applied to starting paragraph tags, which are depicted by <p>. This allows you to structure your content and divide it into relevant paragraphs, which in turn translates into an easier and more seamless reading experience. Once again, the <p> tag should be placed at the beginning of the relevant text, before the alternate closing tag is applied at the end to complete the effect. Unlike heading tags, however, there are no numerical various that can alter the size of the text featured in the paragraph. <\/p>\n\n\n For example:<\/em><\/p>\n\n\n\n Outside of the HTML format, this will break the text down as follows on your finished web page:<\/p>\n\n\n Your First Paragraph<\/p>\n\n\n\n Your Second Paragraph<\/p>\n\n\n\n Your Third Paragraph<\/p>\n\n<\/div>\n\n\n The first examples represent the most basic HTML tags, but there are others that utilize a different format and alternative closing takes. Take line breaks, for example, which create a distinction at which lines of text are broken and continued on the following line. There is a core difference between line breaks and paragraphs in the field of HTML, as while the latter are standard block elements that contain text, the former creates separation within an existing <p> element.<\/p>\n\n\n\n Because of this, line breaks represent an empty element in HTML and are therefore not defined by either opening or closing tags. Instead, they are depicted by the <br \/> tag, which can be inserted into existing <p> elements to break up text and potentially highlight important pieces of information. The single space between the character <be> and the forward-slash is crucial, as otherwise, the tag is not recognizable in HTML format.<\/p>\n\n\n Here is an example:<\/em> <\/p>\n\n\n\n <p>Good morning<br\/> Once applied, this will break the text up as follows:<\/p>\n\n\n Good morning,<\/p>\n\n\n\n Many thanks for your inquiry, we will contact you if we require anything else.<\/p>\n\n\n\n Best Regards<\/p>\n\n\n\n Mr. Jones<\/p>\n\n<\/div>\n\n\n As you can see, you can apply line breaks as often as you like within an existing paragraph element, so long as they add value and make the information easier to digest. You will also see that the opening and closing paragraph tags remain unchanged, with line break tags used to amend the layout of the text included within.<\/p>\n\n\n\n This is one of the examples of how HTML tags can be used to alter existing elements, which plays a key role in defining the visual layout of your web pages and content.<\/p>\n\n\n\n Similarly, there are other tags that can be used within the <p> element or to further separate bodies of text on your web page. One of the most widely used is the <hr> tag, which helps to create an empty element that draws a visual, horizontal line between alternate sections of an online document. You may want to position a line between two bodies of text, for example, in order to refocus the reader or simply introduce a new visual element. This is how you create such a break in HTML:<\/p>\n\n\n Here, the breaking between the hr characters and the forward slash highlight the construction of an empty element, while once again there is no closing tag required to complete the effect. This will create the following visual:<\/em> <\/p>\n\n\n Your First Paragraph<\/p>\n\n\n\n ________________________________________<\/p>\n\n\n\n Your Second Paragraph Image tags also represent empty elements in HTML, which once again means that they do not feature a closing tag. As they only contain attributes that relate to the URL of the image that you are embedding onto the site, they are defined simply by the <img > tag at the beginning of the element. These can be placed anywhere on your website, although it is unusual to include them in existing elements such as paragraphs or headings. Here is how a typical HTML image tag will present itself:<\/p>\n\n\n <img src=”url” alt=”some_text” style=”width:width;height:height;”><\/p>\n\n<\/div>\n\n\n You should also provide alternate text for your image, which helps people to view it in the case of slow loading times or the use of screen reader. This way, if the browser cannot find an image, it will display the value of the alternate attribute to viewers. This once again uses the image tag, but includes a different set of attributes:<\/p>\n\n\n <img src=” wrongname.gif ” alt =” HTML5 Icon” style=” width: 128px; height : 128px; ” ><\/p>\n\n<\/div>\n\n\nWhat is HTML?<\/h2>\n\n\n\n
Where is HTML used?<\/h2>\n\n\n
HTML page structure<\/h2>\n\n\n\n
Google Analytics tracking code for
example.<\/p>\n\n\n\n
here. Fill it with text and images!<\/p>\n\n\n\n
Google Analytics tracking code for
example.<\/p>\n\n\n\nHTML tags<\/h2>\n\n\n\n
Heading tags<\/h3>\n\n\n\n
<h1>This is heading 1<\/h1><\/code><\/p>\n\n\n\n
<h2>This is heading 2<\/h2><\/code><\/p>\n\n\n\n
<h3>This is heading 3<\/h3><\/code><\/p>\n\n\n\n
<h4>This is heading 4<\/h4><\/code><\/p>\n\n\n\n
<h5>This is heading 5<\/h5><\/code><\/p>\n\n\n\n
<h6>This is heading 6<\/h6><\/code><\/p>\n\n<\/div>\n\n\n
This is heading 1<\/h1>\n\n\n\n
This is heading 2<\/h2>\n\n\n\n
This is heading 3<\/h3>\n\n\n\n
This is heading 4<\/h4>\n\n\n\n
This is heading 5<\/h5>\n\n\n\n
This is heading 6<\/strong><\/h6>\n\n<\/div>\n\n\n
Paragraph tags<\/h3>\n\n\n\n
<p>Your First Paragraph<\/p><\/code><\/p>\n\n\n\n
<p>Your Second Paragraph<\/p><\/code><\/p>\n\n\n\n
<p>Your Third Paragraph<\/p><\/code><\/p>\n\n<\/div>\n\n\n
Line break tags<\/h3>\n\n\n\n
Many thanks for your inquiry, we will contact you if we require anything else. <br \/>
Best Regards<br \/>
Mr. J ones<\/p><\/p>\n\n<\/div>\n\n\nHorizontal lines<\/h3>\n\n\n\n
<p>Your First Paragraph<\/p><\/code><\/p>\n\n\n\n
<hr \/><\/code><\/p>\n\n\n\n
<p>Your Second Paragraph<\/p><\/code><\/p>\n\n<\/div>\n\n\n
<\/p>\n\n<\/div>\n\n\nImage tags<\/h3>\n\n\n\n
HTML elements<\/h2>\n\n\n\n