[PROGRAMMING] LEARN HTML WITH 360NG (1)

HTML-You can design your web application in a cross-platform manner.

HTML-(Hypertext Markup Language) is the original language of the web.It is written by putting code into angled brackets (<>)to create tags.The tags surround the content of a web page,working behind the scenes to define the layout of the page.

INTRODUCTION TO SEMANTIC MARKUP.

Semantic Markup is text data that is annotated using a special language to offer additional meaning to the text.

Example, lets consider a list of words in the phonetic alphabet.

  • Delta
  • Echo
  • Foxtrot

In our text content, we could just list these words out like so:

Delta Echo Foxtrot.

For Others to understand the meaning, we need to annotate this list.

[list]

[item]Delta[\item]

[item]Echo[\item]

[item]Foxtrot[\item]

[\list].

With this annotation, we are now making it clear to others that the meaning of this block of text is a list.The meaning in this context is known as Semantics of language.The annotation is Known as Markup of the language.

The most commonly mentioned implementation of semantic Markup is HTML.

HTML MARKUP

<ul>

<li>Alpha</li>

<li>Bravo</li>

<li>Charlie</li>

</ul>

SGML-Standard Generalized Markup Language..(make research on it…i wont be able to explain because of time). HTML is the true extension of SGML.

HTML AND XML

XML(extensible Markup Language) was designed to represent data in a format that was both human and machine-readable. XML shares a relationship with SGML much like HTML but XML restricts SGML further by requiring all tags to be closed and attributes to be explicit.

HTML ELEMENT.

<!Doctype HTML>

<html>

<head>

<title>Sample Page</title>

</head>

<body>

</body>

</html>

CREATE A BASIC HTML PAGE

1)Open visual studio code->File Menu->Open Folder

2)create a new folder and select this folder in the dialog

3)create a new file name index.html

add the following

<!Doctype HTML>

<html lang=”en-US”>

<head>

<title>Introduction to Web Page</title>

</head>

<bode>

WELCOME

</body>

</html>

4)activate the view in default Application by Pressing F1 and search for it or use ctrl+k, ctrl+b.

TEXT ELEMENT

<h1>1st Header</h1>

<h2>2nd Header</h2>

………………………………..

<h6>6th Header</h6>

<p> Paragraph </p>

<b> Bold </b>

<i> italic </i>

<ins> Underline </ins>

<del> Mark through <del>

<mark> Highlight </mark>

 

BLOCK ELEMENTs

In HTML, there are two primary types of container elements. – Block elements and Inline elements.

Block-level elements always take up the full-width that is available on-screen. The content of this element is rendered on a new line.

There are three primary examples of block level element

<br> element->creates a single line break between text content

<body>element

<p>element

<div>->is a multi-purpose element that simple gives you a container for other content.

OTHER BLOCK ELEMENT INCLUDES

  • article
  • aside
  • blockquote
  • br
  • button
  • canvas
  • caption
  • dd, dl, dt
  • h1, h2, h3, h4, h5, h6
  • footer, header
  • form
  • fieldset

INLINE ELEMENT- they only take up the width that they need to render their content.

Multiple Inline Elements may render on the same line if they are not too large to be displayed on the same line. If they are too large to fit on the same line, they can alternatively wrap their content to another line.

The Most common Inline Element is the <span> element.

Others include-

    • strong
    • inst
    • del
    • sup
    • sub
    • em
    • i

MIXING INLINE ELEMENTS AND BLOCK ELEMENTS.

<span style=”background-color:red;”>This is the first line of text</span>

<span style=”background-color:green;”>This is the Second line of text</span>

<div style=”background-color:red; width:800px;”>This is the first line of text</div>

<span style=”background-color:green;”>This is the second line of text</span>

IMAGES TAGS

<img src=”location/image name.image type”/>

e.g<img src=”images/person.png”/>

USING HEIGHT AND WIDTH

<img src=”images/person.png” width=”350″ height=”60″ />

ALTERNATE TEXT

<img src=”images/person.png” alt=”person holding computer” />

FORMATTING ELEMENTS

This is a line of text.This is another line of text.

This is a <b>line of text</b>–>BOLD

This as <i>another line</i> of text–>ITALIC

<mark>of text</mark>–>HIGHLIGHT

<small>small text</small>–>small

<del>deleted text</del>–>Deleted

<ins>Iserted Text</ins>—>Inserted

<sup> Superscript Text</sup>—> Superscript

<sub> Subscript Text</sub>—> Subscript

<p>Paragraph Text</p>—>

Paragraph Text

SEMANTIC FORMATTING ELEMENT

<b></b>—-><strong></strong>

<i></i>—-><em></em>

ATTRIBUTE FORMATTING

<body bgcolor=”lightblue”>

<p align=”right”>

<font face=”consolas” size=”62px” color=”purple”>

<strong>Demo</strong>

<em>Text</em>

</font>

<center>Sample Text</center></p></body>

Download Html PDFS Here—->

 

TANKS FOR READING…

DROP YOUR COMMENTS OR QUESTION AND I WILL REPLY WITHIN 24HRS..

 

MEET YOU ALL IN “LEARN HTML WITH 360NG (2)”

123 total views, 1 views today

3 Comments

  1. Somebody necessarily lend a hand to make severely posts I’d state. This is the first time I frequented your website page and so far? I surprised with the research you made to make this particular put up amazing. Great job!

Leave a Reply

Your email address will not be published.


*