Scribd
Upload
266 views

Ui/ux Design: HTML

HTML is a markup language used to structure and present content on the web. It allows users to create web pages using tags to define paragraphs, headings, lists, links and other elements. Common text formatting tags in HTML include <p> for paragraphs, <ul>/<ol> for unordered/ordered lists, and <a> for hyperlinks. More advanced tags allow formatting text as bold, italic, or underlined. Well-formed HTML pages generally include a basic <html>, <head>, <body> structure.

Uploaded by

Ricky Arun Saxena
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
266 views

Ui/ux Design: HTML

HTML is a markup language used to structure and present content on the web. It allows users to create web pages using tags to define paragraphs, headings, lists, links and other elements. Common text formatting tags in HTML include <p> for paragraphs, <ul>/<ol> for unordered/ordered lists, and <a> for hyperlinks. More advanced tags allow formatting text as bold, italic, or underlined. Well-formed HTML pages generally include a basic <html>, <head>, <body> structure.

Uploaded by

Ricky Arun Saxena
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

TOPIC 1: UI/UX DESIGN: HTML

HTML is an important language in web application. Its used to design web structure and
a web page constructed by using it. Like Indonesia tea motto “Makan Apa Saja Minumnya
Teh Botol Sosro”, HTML recognised by all web browsers. In the server there many server-
side programming languages such as PHP, Python java, etc., however their will response
a HTML page when there is a request from the client.

Create a web page by using HTML is easy since HTML is easy to learn. To create a
web page by using HTML you just need a text editor. You can use any text editor but, in
this course, I suggest you use Visual Studio Code or/and PHPStorm. Visual studio
code is free software that you can use it without worry. PHPStorm in my opinion is very
powerful, this application has rich features needed by developer. Even though this
software has a price but as a student you can register and apply for free usage.

To create a web page:

1) Open Visual Studio Code and create a new page,


2) Save that with a name and follow with extension .html, for example practice-
1.html,
3) In text editor, type following code:
<html>
<head>
<title>MY FIRST HTML</title>
</head>

<body>
<p>HTML page contains many HTML Tags. Those tags have unique functiona
lities. </p>
</body>
</html>
4) Save the page and open in web browser.
1.1 HTML Structure

A web page constructed from HTML. The minimum structure of a HTML document are

<html>

<head>

</head>

<body>

</body>

</html>

From the code above, the HTML document start and end with tag <html> dan </html>.
There two main parts in HTML documents:

1) Head. In this section you can declare any information about the HTML document
for example, the title, keyword, CSS, JavaScript and other information. Any
information in this section will not be shown in the body of web browser. You can
create and put any information for this section in your HTML page by using tag
<head> and </head>.
2) Body. This section contains any thing that will be shown in the web browser such
as text, paragraph, image, table, and so on. You can create and put any content that
you want display in web browser in this section using tag <body> and </body>.

1.2 Text Formatting

Text formatting is about how to format a text that you want to display in web browser.
For example, you want create paragraph, or you want to highlight a word by using bold,
italic or underline or combination of those formats, and so on. In this section we will
discuss several tags used to format text.

1.2.1 Paragraph
A web page sometimes consisting of many texts. If the text is very large, it arranged into
several paragraph. A paragraph is consisting of several sentences. To format a text into
paragraph in HTML you can using tag <p> with format and example as follow
Format

<p>You can put any text in this paragraph</p>

Example :

<html>
<head>
<title>Formatting Text</title>
</head>

<body>
<p>My name Monkey D. Luffy. I am a Pirate. My goal is to find One Piec
e and become Pirate King.</p>
<p>My name Roronoa Zorro. I am a Pirate. I'm santoryu style which mean
I using three sword.</p>
</body>

</html>

As you can see in the code above, we place the paragraph inside the body because we
want to display it in the web browser. You can create new page in visual studio code and
put the above code and save it (for example practice-2.html) and open it in web browser.

1.2.2 List
In text sometimes you want to make a list, for example to list your favourite food or you
want list your task, and so on. To make a list you can use following format:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>...</li>
</ul>

For clear example, lets update practice-2.html as follows:

<html>
<head>
<title>Formatting Text</title>
</head>

<body>
<p>My name Monkey D. Luffy. I am a Pirate. My goal is to find One Piec
e and become Pirate King.</p>
<p>My name Roronoa Zorro. I am a Pirate. I'm santoryu style which mean
I using three sword.</p>
<p>Our other crews:</p>
<ul>
<li>Usop</li>
<li>Nami</li>
<li>Sanji</li>
<li>Copper</li>
<li>Robin</li>
<li>Franky</li>
<li>Brook</li>
<li>Jimbe</li>
</ul>
</body>

</html>

Save your changes and refresh your web browser you will see:
As you can see in the image above, it created a bullet list. To create a numbering list, you
can change the tag <ul> into <ol>, please try it by yourself.

1.2.3 Bold, Underline and Italic


If you want to highlight a word or a sentence, it is a common thing to make them bold or
underline or italic, isn’t it? In HTML to highlight your text is easy. All you need are:

1) Tag <i> to make your text italic


2) Tag <b> to make your text bold
3) Tag <u> to make your text underline

To use those tags are easy, you just need put the text between the tag. For example:

1) <i>How are you? </i> will result: How are you?


2) <b>How are you? </b> will result: How are you?
3) <u>How are you? </u> will result: How are you?

Maybe you wonder how to use them together? To use them together also easy:

1) <u><b><i>How are you?</i></b></u> will result: How are you?


From the format above may be you have notice that the tag is nested, which mean inside
the tag <u> there is tag <b>, inside the tag <b> there is tag <i>, and inside the tag <i> there
is a text. How about the order? The order is not important here. You can change the order
of tag and it will result the same thing. For clear understanding check following example:

<html>
<head>
<title>Formatting text 2</title>
</head>
<body>
<p>Hello my name is <b>John</b>. I live in <i>Samarinda</i>. My <u>motto</
u> is "<u><i><b>just do it</b></i></u>"</p>
<p>Please take attention of the tags order from following example:</p>
<ul>
<li><u><i><b>just do it</b></i></u></li>
<li><i><u><b>just do it</b></u></i></li>
<li><b><i><u>just do it</u></i></b></li>
</ul>
<p>Even though the order is different each other, the tree example has sam
e display in web browser.</p>
</body>
</html>

Save above code with name practice-3.html and open it in web browser:
1.2.4 Other tags
In previous section we learned several tags used to format a text. For example in section
1.2.1 we learned how to create a paragraph, in section 1.2.2 we learned how to make a
list and in section 1.2.3 we learned how to bold the text, how to underline the text and
how to make a text italic. Previous section is a basic understanding about a tag and how
to use it. It’s very important because there are lot of tags related to text formatting and
we cannot discuss all of them here, but at least from previous lesson we learned about
basic usage of the tags.

For other tags related to formatting text you can found in this link:
https://www.w3schools.com/tags/ref_byfunc.asp at formatting section.

1.3 Hyperlink

A hyperlink is a tool that enable a web page connected to other pages. A hyperlink or
simply called link contain an address of another web page and when you click that link, it
will go to another page. This HTML tag commonly use as navigation or menu of the
website.

To make a hyperlink is by using tag <a> with following format:

<a href="address">label</a>

There are two things that need to pay attention:

1) address. The address can be anything for example a web page URL, or a filename.
2) label. The label is a text that you want to display in web browser. It’s a text that
will be clicked by the user.

For clear understanding please take attention for following example:


<html>
<head>
<title>Formatting Text</title>
</head>

<body>
<h1>Internal Link:</h1>
<ul>
<li><a href="practice-1.html">Example 1</a></li>
<li><a href="practice-2.html">Example 2</a></li>
<li><a href="practice-3.html">Example 3</a></li>
<li><a href="practice-4.html">Example 4</a></li>
</ul>
<h1>External Link:</h1>
<ul>
<li><a href="http://www.rofilde.web.id">My Website</a></li>
<li><a href="https://www.google.co.id">Google Indonesia</a></li>
<li><a href="https://www.umkt.ac.id">Website UMKT</a></li>
<li><a href="http://www.fst.umkt.ac.id">Website FST</a></li>
</ul>
</body>

</html>

Save the above code with name practice-4.html. Open it in web browser:
1.4 Assignment

1) Create and run practice-1.html, practice-2.html, practice-3.html and practice-


4.html from previous discussion.
2) Find 10 more tags related to text formatting and explain the functionalities for
each of them and how to use it.
3) Create 5 more HTML page. For each page fill with your biography. You have to use
all the HTML tags from previous explanation and the tags that found from number
2.

You might also like