Before someone jumps into the world of developer, he must know these terms. Website developers are not far from the world of coding. Coding terms will continue to be embedded in existing programming language terms as mentioned above, HTML, CSS, and so on. This coding will be useful for translating the wishes of the developer and the device used, this will be useful as a way of communication between the developer and the device.
Well, to keep the contents of this article from widening from the title of this article, the author will not go at length anymore. These are terms that are often used by developers. These terms are presented in full as much as possible.
HTML is the primary web mark up language and it runs naturally in every browser and is maintained by the World Wide Web Consortium.
The web browser receives HTML documents from a web server or from local storage and converts the documents into multimedia web pages. HTML describes the structure of web pages semantically and initially includes gestures for the appearance of the document.
HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects such as interactive shapes can be embedded into the rendered page. HTML provides a means to create structured documents by showing structural semantics for text such as headings, paragraphs, lists, links, citations, and other items. HTML elements are represented by tags, written using angle brackets. Tags such as < img /> and < input /> directly insert content into the page. Other tags such as < p > surround and provide information about the document text and may include other tags as sub-elements. The browser does not display HTML tags, but uses them to interpret page content.
HTML (HyperText Markup Language) is a language that uses certain signs (tags) to represent the codes that must be interpreted by the browser so that the page can be displayed correctly.
HTML functions to manage a series of data and information so that a document can be accessed and displayed on the Internet through web services. Specifically, HTML has the following functions:
Difference between HTML and HTML5
You may have heard of HTML5? what is the difference between HTML and HTML? You may still suspect that the two terms are the same ?.
HTML4 (recently referred to as “HTML”) was released in 1999 and its newest version was introduced to the public in 2014. Known as HTML5, this latest version adds more new features to the mark up language. One of the advanced features in HTML5 is support for audio and video embeds. So, instead of using the Flash player, we can embed video and audio files on web pages using tags < audio> </ audio > & < video > </ video>. It also has built-in support for scalable vector graphics (SVG) and MathML for mathematical and scientific formulas.
HTML5 also introduces some semantic improvements. The new semantic tag sends information to the browser about the meaning of the content, which is useful not only for readers, but also for search engines.
The most used semantic tags are:
<article> </article>, <section> </section>, <aside> </aside>, <header> </header>, and <footer> </footer>.
The following table provides information about the significant differences between HTML and HTML5:
|1||Does not support audio and video without using flash player support.||supports audio and video control with the use of audio and video tags.|
|4||Vector graphics are possible in HTML with the help of various technologies such as VML, Silver-light, Flash, etc.||Vector graphics are also an integral part of HTML5 like SVG and canvas.|
|5||Does not allow drag and drop effects.||Allows drag and drop effects.|
|6||It is impossible to draw shapes such as circles, rectangles, triangles, etc.||HTML5 makes it possible to draw shapes such as circles, rectangles, triangles, etc.|
|7||Works with all legacy browsers.||Supported by all new browsers like Firefox, Mozilla, Chrome, Safari, etc.|
|8||Older versions of HTML are less mobile friendly.||The HTML5 language is more mobile friendly.|
|9||The Doctype declaration is too long and complicated.||The Doctype declaration is quite simple and straightforward.|
|10||Elements such as nav, header are missing.||New elements for web structures like nav, header, footer etc.|
|11||Long and complex character encodings.||Simple and easy character encoding.|
|12||It is almost impossible to get a user's actual GeoLocation with the help of a browser.||One can trace a user's GeoLocation easily by using the JS GeoLocation API.|
|13||Cannot handle inaccurate syntax.||Capable of handling inaccurate syntax.|
|14||Attributes such as charset, async, and ping are missing in HTML.||The charset, async, and ping attributes are part of HTML 5.|
Penyempurnaan Elemen HTML dalam HTML5, termasuk diantaranya menghapus elemen berikut :
|#||Elements in HTML||Elements in HTML5|
|1||applet||equal to: object|
|2||acronym||equal to: abbr|
|3||dir||equal to: ul|
|7||strike||There are no new tags. CSS is used for this|
|8||big||There are no new tags. CSS is used for this|
|9||basefont||There are no new tags. CSS is used for this|
|10||font||There are no new tags. CSS is used for this|
|11||center||There are no new tags. CSS is used for this|
|12||tt||There are no new tags. CSS is used for this|
Attributes in HTML
In HTML there are several attributes that are commonly used, the author will only present the points in outline to simplify other explanations. It's like :
<div class="big-box yellow-box">It's a big yellow box.</div>
<div id="my-box">This is my box! Put your text in some other box.</div>
<a href="http://google.com">Google it!</a>
<html> <head> <title>Contoh tag body</title> </head> <body> This is in the body! </body> </html>
<ul id="parent"> <li id="child">I am the son of the parents!</li> </ul>
<!-- This is an HTML comment! -->
<div>This is a div element.</div>
<!DOCTYPE html> <html> This html section loads the web page side code. </html>
<html> <!-- "head" section --> <head> </head> <!-- "head" section --> <body> </body> </html>
<h1> This is an H1 header ! </h1> <h2> This is an H2 header! </h2> <h3> This is an H3 header! </h3> ... and so on.
*Horizontal rules. The text "hr" will give a horizontal space with a black line 1px thick.
Teks blog anda. <hr> ...teks berikutnya.
<a href="url this link goes to">Teks tautan</a> Teks berikut ini <a href="http://google.com">go to Google</a>.
<img src="./assets/img/mypicture.png" class="style" alt="my picture">
<p> Some text <br/> spanning two lines </p>
<link type="text/css" rel="stylesheet" href="styles.css" />
<ul> <li>Cras justo odio</li> <li>Dapibus ac facilisis in</li> <li>Morbi leo risus</li> <li>Porta ac consectetur ac</li> <li>Vestibulum at eros</li> </ul> can also be translated as : <div class="col-md-12" > <div class="list-group"> <a href="#" class="list-group-item list-group-item-action active"> Cras justo odio </a> <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a> <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a> <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a> <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a> </div> </div>
<p> This is paragraph text! </p>
<p> <strong> Warning: </strong> Acids can cause serious burns </strong> </p>
<table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
<tag attribute='value'>content</tag keyword>