HTML is the language for creating Web pages and the are actually blocks that are used to build a page. Learn the basics to become a front-end professional. HTML elements (This article was initially posted on https://www.developermate.com ) The first web pages was released in 1990 and the pages were only used for presentation. Today the web is a very important piece in our daily lives. You may use many different web browsers to look at web-pages, like: Google Chrome, Opera, Internet Explorer and Firefox. HTML stands for HyperText Markup Language. H TML Page Structure It is important to understand the HTML page structure. Only content inside the section (the white area) is displayed by the web browser. The [<head>](https://www.developermate.com/HTML/head) is used for the title and meta-tags. <body> HTML Tags HTML tags are element names surrounded by angle brackets. HTML tags are usually in pairs like and <table> </table>. Remember to use a a forward slash when you write the end tag. HTML Attributes Elements will often have multiple attributes. HTML attributes are used to modify the value of the HTML element. <tagname attributename=”setting”>content for the html element…</tagname> The id must be unique within the HTML document. The HTML [<id>](https://www.developermate.com/HTML/id) attribute defines a unique id for an HTML element. You can use the to select the HTML element, then you can read or manipulate the element with CSS and JavaScript. <id> H TML Building blocks These elements are used to build a HTML page. The elements consist of start and end tags and between those tags we put the text or graphic content. The HTML elements can also be called building blocks. The HTML Block-level Elements A block level element always starts on a new line. This type of elements also always takes up the full width available on the page. This means that it extends as far as possible to the left and as far as possible to the right. The HTML Inline Elements Unlike a Block-level element, an Inline element does not start on a new line. In addition it does not take up the entire width, but just as much width as necessary. The Empty HTML Elements There are also HTML-elements that are has no content and these are called empty elements. An empty element that is used frequently is the element . This is an empty item that has no content. <br> Lower- or Uppercase? Although it is not wrong and actually completely valid to use uppercase letters for tags and attributes when writing HTML the convention is to always uses lowercase letters. This is for historical reasons and goes back to XHTML days where the conversation was completely strict and where uppercase letters were not valid. HTML Headings The highest section is level and the lowest section is . You could also say that has the highest importance and has the lowest importance. The HTML [<h1>](https://www.developermate.com/HTML/headings) – [<h6>](https://www.developermate.com/HTML/headings) elements are representing six separate levels of section headings. <h1> <h6> <h1> <h6> Headings are not only important for changing the look of the page. Headings are also important when it comes to how search engines work. To index the structure and content of a web page the search engines are using headings. Users often make a quick check of your page by just reading the headings. It is important to use headings to view the document structure. HTML Paragraphs The HTML <p> element defines a paragraph. The paragraph tag places a blank line above and below the text. HTML Links HTML Links are also called hyperlinks. A website consists of several pages and you should link the pages together. Links makes it easy for users to navigate between pages in your website and even to other websites. HTML Links is used to link pages with each other. HTML Tables Table data is information that we can present in a two-dimensional table. Such a table consists of a number of rows and a number of columns of cells containing data. The element HTML [<table>](https://www.developermate.com/HTML/tables) is being used to represent table data. All existing lists must contain at least one list element, but it can also contain multiple list elements. In HTML there are three different ways to define lists of information. HTML Formatting Text To be able to it’s format text elements good to be familiar with the options available for setting the textformat in HTML and XHTML. The formatting elements are designed and used to display various types of text. This is done by differentiating source code , variables , user input and terminal or other similar output . Computer Phrase Elements are useful when it comes to documenting computer code development and user interactions. <code> <var> <kbd> <samp> Reserved characters A bit of text (a string) that begins with an ampersand (&) and ends with a semicolon (;) is called an HTML entity. These are mostly used to display reserved characters. These bits of text would otherwise be interpreted as HTML code and invisible characters. This is also useful if you wish to write characters that are difficult to type on a regular keyboard. That means that these characters will be parsed as HTML code by the browser. So when for example the less-than (<) sign is used in the code your browser will interpret the text that follows as a tag. Some characters are special and reserved for use in HTML. HTML Comments To explain and define section parts of a document to others who see the code, it’s a good practice to add comments to your HTML code. Especially in complex documents. To increase the readability of the code and help others understand the code, then comments are very useful. Comments are parts of the code that are ignored by a browser. Texts and content placed between these tags are handled as a comment and will be completely ignored by the browser. <! - ... -> H TML Layout This is important for the entire user experience and for the user-friendliness of the page. When you develop a webpage, it is very important to think about the layout and what the page should look like. Nowadays, it’s common and highly recommended to use modern technologies such as , and Angular to build the pages. But it’s also possible to create pages just with . CSS JavaScript HTML HTML Iframes The can appear anywhere in an HTML document. The can have separate scrollbars and borders. The HTML Inline Frame element, [<iframe>](https://www.developermate.com/HTML/iframes) , embeds another HTML page into the current page. <iframe> <iframe> HTML Images Fortunately, it did not take long before we got the opportunity to embed pictures and other interesting types of content.Images are not only nice to look at but also important to use for describing complex concepts easily on your web page. In the childhood of the web, there were only text and no pictures. HTML Colors HTML colors are specified using defined color name keywords or RGB, HEX, HSL, RGBA, HSLA values. Color Hue is another word for color. For example the color green has the HEX color code #00FF00, that is also RGB(0,255,0), which is ‘0’ red, ‘255’ green, and ‘0’ blue. The color codes can be used to change the color for the text and the background on a web page. HTML Color Names Color Name keywords are case-insensitive identifiers that can be used instead of RGB, HEX etc and the Color Name represent a specific color, such as green/Green, blue/Blue, yellow/Yellow, or lightseagreen/LightSeaGreen. HTML Classes All HTML elements with the same name attribute will get the same style and format. Use the HTML [class](https://www.developermate.com/HTML/classes) attribute to define the same style for one or many elements in your web page. class It is difficult and time-consuming to specify the same style to many elements using inline style for each element. HTML classes are frequently used attributes when building attractive websites. The classes will help you to spend less time writing and worrying about styles like fonts and colors. HTML Styles In the -element, you find the CSS, which is applied to the content.The -element can be placed in the document's or but normally it is recommended that styles are placed in . Even better is to place the styles in external stylesheets and referring to them with elements. The HTML [<style>](https://www.developermate.com/HTML/styles) -element contains information about the style of the document or a part of the document. <style> <Style> <head> <body> <head> <link> When several - and elements are included in your document, they are applied to the DOM in the same order as they are included in the document. <style> <link> HTML File Paths The filepath is like an address to the file and it helps the web browser to find the file. File paths are used to link external files such as images, videos, style sheets, , displaying other web pages etc. A file path specify the location of a file. JavaScript There are two types of filepaths: Absolute File Paths and Relative File Paths. H TML Forms The HTML [<form>](https://www.developermate.com/HTML/forms) element is used to collect user input and post it back to the server. The is a block-level element and it defines an interactive part of a webpage. All controls inside the will be posted back to the server. <form> <form> HTML Form Elements An HTML element is defined by a starting tag and usually it has an ending tag. Most HTML elements have content in between the starting tag and the ending tag. HTML elements defines different parts of an HTML page. **<tagname>Element content...</tagname>** HTML Input Types The reason is the large number of combinations of input types and attributes. Regardless of the type, all -elements are based on the HTMLInputElement interface and that means they all share the exact same set of attributes. But in spite of that, not all attibutes will work properly for all input types and some of the input types only support a few of these attributes. In HTML, one of the most powerful and complex elements is the [<Input>](https://www.developermate.com/HTML/input-attributes) element. <input> These are used to accept data from the user. There are many different types of input data and control widgets for many different types of devices. The HTML [<input>](https://www.developermate.com/HTML/input-types) element is used to create controls that are interactive for web-based forms. HTML URL Encode URLs must use the ASCII character-set. Characters outside the ASCII set must be converted to be able to be transmitted over the Internet. [URL Encoding](https://www.developermate.com/HTML/url-encode) is the process of converting a string into a valid format that can be transmitted over the Internet. replaces non-ASCII characters with a "%" followed by hexadecimal digits, you can also use the term percent-encoding for this process. URL encoding HTML Methods for Rest Services Have you ever wondered what is the difference between the and the requests? When should you use and ? There are many available HTTP methods. GET POST PUT DELETE Continue reading to get a basic understanding of RESTful services and the different HTTP methods, also called HTTP verbs. Understanding the HTTP methods is important when working with these APIs. Most REST services is CRUD-based. The CRUD pattern is based on the HTTP protocol. A CRUD service supports the methods , , and . POST GET PUT DELETE HTTP GET Method requests are the most widely used of the HTTP methods. The GET method is used to retreive data from a server. For example, say you have an API with a endpoint. Making a GET request to that endpoint should return a list of all available cars. GET /cars Since a GET request is only requesting data and not modifying any resources, it’s considered a safe method. HTTP POST Method requests are used to send data to the server to create a resource. The data that is sent is stored in the request body of the HTTP request. POST The simplest example is a contact form on a website. When you fill out the inputs in a form and hit , that data is put in the response body of the request and sent to the server. This may be JSON, XML, or query parameters (there’s plenty of other formats, but these are the most common). Send HTTP PUT Method requests are used to send data to the server, it is used to update a resource. Calling the same PUT request multiple times will always produce the same result. In contrast, calling a POST request repeatedly will have side effects of creating the same resource multiple times. PUT HTTP DELETE Method The method will delete a resource. This method is one of the more common in RESTful APIs so it's good to know how it works. DELETE If a new car is created with a POST request to , and it can be retrieved with a request to , then making a request to will completely remove that car. /cars GET /cars/{{id}} DELETE /cars/{{id}} HTML HTTP Status Codes REST APIs use the HTTP Status code in the HTTP response message to inform the clients of their request’s made to the server. The first digit of the status code specifies one of five standard classes of responses. As you can see, there is many parts of the HTML page that you should master. Set your goals and use the tools that are available, as with the . www.developermate.com great coderunner tool Happy coding.
