html coding basicshtml coding basics 1. html coding, what is it? 2. form a paragraph text alignment...

© Copyright AxioCode 2017 1 / 12

HTML coding basics

1. HTML coding, what is it?

2. Form a paragraph

► Text alignment

► Line break

3. Insertion of a link

► Put a link into one of your page

► Open a link in another window of your browser

► Put a link into another website www.

► Put a link into an email

4. Insertion of an image

► Define the path of the image

► Add a frame to the image

► Line up an image

► Define the dimensions of an image

► What is the HTML “alt” tag?

► Insertion of an image with an URL link as a caption

1. HTML coding, what is it?

HyperText Markup Language, commonly referred to as HTML, is the standard markup language

used to create web pages. It is written in the form of HTML elements consisting of tags enclosed

in angle brackets (like <html>). HTML elements form the building blocks of all websites. HTML

allows images and objects to be embedded and can be used to create interactive forms. It

provides a means to create structured documents by denoting structural semantics for text such

as headings, paragraphs, lists, links, quotes and other items.

(- Wikipedia definition)

Even without expertise, embed some lines of code in your webpages and, particularly, in your

markers, become conceivable.

2. Form a paragraph

► Text alignment

To line up your text, it suffices to place your paragraph between the two HTML tags ….

a. Alignment to the left

The text is lined up to the left.

Result:

The text is lined up to the left.

b. Alignment to the right

The text is lined up to the right.

Result:

The text is lined up to the right.

c. Centered alignment

The text is centered.

Result:

The text is centered.

d. Justified text

This text is justified. It requires two lines

and more text for a paragraph. So, you will be able to see this

example correctly. This text is justified. It requires two lines


example correctly. This text is justified. It requires two lines


example correctly.

Result:

This text is justified. It requires two lines and more text for a paragraph. So, you will be able to

see this example correctly. This text is justified. It requires two lines and more text for a

paragraph. So, you will be able to see this example correctly. This text is justified. It requires two

lines and more text for a paragraph. So, you will be able to see this example correctly.

► Line break

To force a line break in a text, place the tag .

You need a line break at this exact spot to form your

paragraph.

Result:

You need a line break at this exact spot

to form your paragraph.

3. Insertion of a link

To embed a link in a text, you have to put the concerned sentence between the different tags: <a

href=”…”>…</a>.

► Put a link into one of your page

<a href="blog/publish-your-map-on-blog-and-facebook-page">Example

of a blog post</a>

Result: Example of a blog post

http://www.click2map.com/blog/blog/publish-your-map-on-blog-and-facebook-page

► Open a link in another window of your browser

<a href="blog/publish-your-map-on-blog-and-facebook-page"

target="_blank">Example of a blog post</a>

Result: Example of a blog post

► Put a link into another website www.

<a href="https://www.click2map.com/" target="_blank">Click2Map

website</a>

Result: Click2Map website

► Put a link into an email

<a href="mailto:[email protected]">Click2Map support</a>

Result: Click2Map support

http://www.click2map.com/blog/blog/publish-your-map-on-blog-and-facebook-page

http://www.click2map.com/

mailto:[email protected]

4. Insertion of an image

To insert a picture in a text or a page, it suffices to put the link of the image in the tag <img

src="...">.

► Define the path of the image

<img

src="https://www.click2map.com/sites/default/files/field/image/lo

go_0.png">

Result:

► Add a frame to the image

<img


go_0.png" border="1">

Result:

<img


go_0.png" border="3">

Result:

► Line up an image

To line up your picture, you can add align=”...” in your HTML tag <img>.

a. Alignment to the left

<img


go_0.png" align="left">

Result:

b. Alignment to the right

<img


go_0.png" align="right">

Result:

c. Centered alignment

<img


go_0.png" align="center">

Result:

► Define the dimensions of an image

To resize an image, you have to add an attribute in your HTML tag, <img>.

a. Modify the width and the height Insert the height=”…px” and width=”…px” attributes in your <img> tag to modify or force the

size of the concerned image.

<img

src="https://www.click2map.com/sites/default/files/field/image/ic

one" width="100px" height="100px">

Result:

b. Resize proportionally If you need to resize your image without deformation, use the width="…px" attribute in your

<img> tag. The height will be automatically adapted according to the width.

<img

src="https://www.click2map.com/sites/default/files/field/image/im

age-foule" width="640px">

Result:

c. Use the maximum width of a page In order to use the maximum width of your page, it suffices to add a width="100%" attribute in

your HTML <img> tag.

<img


go-full.png" width="100%">

Result:

► What is the HTML “alt” tag?

The alt tag allow you to display the title of the image when it downloads or if the download don’t

work properly for some reasons.

This tag is not required and doesn’t avoid the display of your image. However, it is really important

for your referencing. Indeed, it is essential if you need to index your images or to have a better

place in the results of the image search engines like Google Images.

It suffices to embed the “alt” attribute in your HTML <img> tag.

<img

src=”https://www.click2map.com/sites/default/files/field/image/lo

go_0.png” alt=”Logo Click2Map”>

Result:

► Insertion of an image with an URL link as a caption

<img

src="http://www.click2map.com/sites/default/files/Surrounded-by-

giant-green-anemones.jpg" alt="Image" width="260px"/> <a

href="http:// nationalgeographic.com/" target="_blank"

title="National Geographic Source">Source: National

Geographic</a>

Result:

html coding basicshtml coding basics 1. html coding, what is it? 2. form a paragraph text alignment...

Documents