Switching to new technologies and programming languages is not always easy, because the syntax can be radically different. But be honest: companies often use old versions of the workbench without features such as auto completion. Only few ABAP developers have access to the newest versions. That is the reality in the SAP consultant business. SAP UI5 (and web development in generela) can be developed with modern IDEs, such as Eclipse.
HTML
HTML stands for Hypertext Markup Language and I am sure that most of you have already heard of it. It is used the describe websites. It structures content, let it be text, images and so on. Version 5, the newest version, allows you to insert video, audio and several other interesting features like 3D graphics.To develop a webpage with HTML5 all you need is a texteditor and a modern browser (Chrome, Safari, Firefox, IE). It is important for you to know that it makes a difference which browser you use. They contain different rendering engines and therefore the output is not always the same. You should always test your website on the most popular browsers to make sure that your website will be presented correctly to most of the users. A lot of companies still use old versions of browsers. Therefore it is always a good idea to test your site on old browsers like IE6.HTML is a markup language that consists of HTML elements, like the element p, which represents a paragraph. These elements are called 'Tags'. The h1-tag represents a header. It could look like this:
<h1> I am a header</h1>An opening tag looks like this "<tag>" and a closing tag looks like this "</tag>". This syntax tells the browser, that the text between "<h1>" and "</h1>" is a header. The HTML tags are inserted into fixed parts of a HTML website. These parts are called the "head" and the "body" of the page. A standard HTML5 page is declared as follows:
<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Transitional//EN“ „http://www.w3.org/TR/html4/loose.dtd“>
<html xmlns=„http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=„Content-Type“ content=„text/html; charset=utf-8″ />
<title>New Web Project</title>
</head>
<body>
<h1>New Web Project Page</h1>
</body>
</html>
<!DOCTYPE html>
Your website is defined by the <html>-tag. The <head>-tag contains the header of the page. It contains meta information like the charset. This is important if you use certain special symbols.
The <body>-tag contains the content of your website.To increase the readability of your HTML-code you can insert spaces or tabs between your tags. You should always try to use indentation and blank lines to make your code readable.
I will now present the most common tags:
I already mentioned the headers <h1> to <h6>. The higher the number the smaller is the header font size. This correlates to the headers in Microsoft Word.
The tag <p> is a paragraph in which you can add text.
<ol> is a sorted list, <ul> a list, <li> is a list entry, <br> is a carriage return and another often used element is <div>. <div> can be used as a frame for neary every other element.
A very simple page could look like this:
<!DOCTYPE HTML PUBLIC „-//W3C//DTD HTML 4.01 Transitional//EN“
„http://www.w3.org/TR/html4/loose.dtd“>
<html xmlns=„http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=„Content-Type“ content=„text/html“; charset=“utf-8″ />
<title>New Web Project</title>
</head>
<body>
<h1>SAP UI5 Basics</h1>
<h2>SAP NetWeaver UI Development Toolkit for HTML5</h2>
<div>
<p>On the website of our <i> department</i>
<a href="http://www.example.com"> Mission Mobile</a>
you can find interesting news and articles <br>
covering current topics in the field of <b>mobile applications</b>.
</p>
</div>
</body>
</html>
Let's wrap it up
HTML is used to structure content on a webpage. I hope, that you could get a little glimpse into the world of web development und understand the core concept of it. I can only recommend using the internet, books and forums to strengthen your knowledge in this field.
Maybe you have already noticed that the standard elements a far away from looking fresh and modern. How can you implement a corporate design? This brings me to the second part of this series: CSS or cascading style sheets. This technology is used to format your html website.
If you have any question feel free to ask me in the comment section.