Anúncio
Anúncio

Mais conteúdo relacionado

Anúncio

Lecture-2.pptx

  1. Basic HTML Tags
  2.  HTML is a fairly straightforward programming language. Each tag starts with a < and ends with a >. For example the paragraph tag is <p>  There is a range of HTML tags, they help you to design your web page. There are four required tags in HTML. These are html, title, head and body. The table below shows you the opening and closing tag, a description and an example.
  3. Start HTML Tag End HTML Tag Description <html> </html> These are the tags you put at the beginning and end of an HTML file.
  4. <head> </head> This includes information including title, meta tags, content type, links to external pages like CSS and JavaScript.
  5. <title> </title> This is the text that goes in the title bar or the browser window. <body> </body> This contains the contents of the document
  6. Open tag Close tag Description Example <p> </p> This tag allows you to create paragraphs My name is Fred. I live in Medway <h1> </h1> This is the largest heading Heading 1 <h2> </h2> This is second biggest heading Heading 2 <h3> </h3> This is the next heading Heading 3 <h4> </h4> This is another heading Heading 4 <h5> </h5> This is the second smallest heading Heading 5 <h6> </h6> This is the smallest heading Heading 6 <hr > n/a This is a horizontal line. You can use width and size attributes <b> </b> This makes text bold Bold text <i> </i> This makes text italic Italic text <br /> n/a This tag allows you to insert line breaks abc def
  7. Special Characters In order to be able to display < and > escape symbols need to be used so that the browser doesn't misinterpret the code. A character entity is used so that special characters can be displayed. These consist of an ampersand(&), an entity name of a # and an entity code number and a semicolon(;). Examples of special characters include:- Greater than > &gt Less than < &lt Ampersand & &amp Space &nbsp Quotation mark " &quot Copyright © &copy
  8. Accent Marks  Accent marks in HTML also use the escape symbol. Like the special characters accent marks start off with an ampersand & and then is followed by a letter. If the letter is uppercase then the symbol is going to be uppercase, if the symbol is lowercase then the symbol is going to be lowercase. Symbol HTML Code Symbol HTML Code Symbol HTML Code Symbol HTML Code à &agrave; á &aacute; â &acirc; ã &atilde; ä &auml; å &aring; ç &ccedil; è &egrave; é &eacute; ê &ecirc; ë &euml; ì &igrave; í &iacute; î &icirc; ï &iuml; ñ &ntilde; ò &ograve; ó &oacute; ô &ocirc; õ &otilde; ö &ouml; ø &oslash; ù &ugrave; ú &uacute; û &ucirc; ü &uuml;
  9. Attributes  Key terms and abbreviation are used for most text properties. However some properties need more information like aligning text  An example of this is justifying text. You need to say whether the text is going to be left, right or centred. To be able to do this you need to use text attributes. This text has been justified to the left Left To justify a paragraph to the left the HTML code is:- <p align="left"> Text you want justified to the left </p> This text has been centred using the align centre tagged Center To centre align a paragraph the HTML code is:- <p align="center"> Text you want centred goes here </p> This text has been justified to the right Right To justify a paragraph to the right the HTML code is:- <p align="right"> Text you want justified to the right </p
  10. Horizontal lines The code below shows a horizontal line which takes up 75% of the page and has a thickness of 3. <hr width="75%" size="3"/> If you don't specify a size of the horizontal line then the default size is 2. <!– Comment –> The comment tag helps programmers to understand the HTML source code. The comments are not visible on the web page in a browser. Syntax: <!-- Write your comments here --> <a></a> The <a> tag or the anchor tag allows us to link one web page to another page or a section of the same page. The <a> tag has an href attribute that holds the destination URL. Using the anchor tag, we can create a hyperlink to web pages, files, email addresses, segments on the same page, etc. <a href="https://www.naukri.com/learning/">This is a link</a>
  11. What is the largest header tag? < h5 > < h8 > < h6 > < h1 > What is the special character for >? &gt; &nbsp; &copy; &quot; What are the 4 required HTML tags? HTML, Head, Title, Body P, B, H1, H2 HTML, Body, P, H1 Html,Meta, Head, Body What attribute is used to centre a paragraph? span font align justify
  12. What would you use to link to a specific part of the page within the document? image anchor table css To get an image to sit on the right side of the window with text filling the area to the left of the image, what would your tag need to look like? <img src align="mountains.jpg" "right"/> <img src="mountains.jpg" align="right"/> <img="mountains.jpg" src align="right"/> <img " mountains.jpg" align src="right"/>
  13. <img> The image tag allows us to insert images into a web page. It has no closing tag. The attributes of the image tag include: •src: the source file (src) •alt: alternative text •width •height Example: <img src="naukrilearning.jpg" alt="naukri learning" width="100" height="100"> <meta> These meta tags are used inside the head tag and they making describe the metadata i.e data about data. These tags are useful in search engine optimization which means when users search for our websites the chances that the browser recommends our webpage becomes high which leads to an increase in traffic over the webpage. A single HTML document can contain multiple tags. Syntax: <meta attribute-name=”value”> <link rel =”stylesheet” href=”file.css “> This tag is used to include external style sheets. Use this tag when you don’t want to include CSS in the HTML document. To make it more simple we make a CSS file with the code and include this file in the link tag. Syntax: <link rel =”stylesheet” href=”file.css “>
Anúncio