Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML. Basic HTML HTML document – HTML headings – to HTML paragraphs – HTML links – HTML images –

Similar presentations


Presentation on theme: "HTML. Basic HTML HTML document – HTML headings – to HTML paragraphs – HTML links – HTML images –"— Presentation transcript:

1 HTML

2 Basic HTML HTML document – HTML headings – to HTML paragraphs – HTML links – HTML images –

3 HTML Attributes AttributeDescription altSpecifies an alternative text for an image disabledSpecifies that an input element should be disabled hrefSpecifies the URL (web address) for a link idSpecifies a unique id for an element srcSpecifies the URL (web address) for an image styleSpecifies an inline CSS style for an element titleSpecifies extra information about an element (displayed as a tool tip) valueSpecifies the value (text content) for an input element.

4 HTML Headings TagDescription Defines an HTML document Defines the document's body Defines the document's head element to Defines HTML headings Defines a horizontal line

5 HTML Paragraphs TagDescription Defines a paragraph Inserts a single line break Defines pre-formatted text

6 HTML Styles style attribute for styling HTML elements background-color for background color color for text colors font-family for text fonts font-size for text sizes text-align for text alignment

7 HTML Text Formatting Elements TagDescription Defines bold text Defines emphasized text Defines italic text Defines smaller text Defines important text Defines subscripted text Defines superscripted text Defines inserted text Defines deleted text Defines marked/highlighted text

8 HTML Quotation and Citation Elements TagDescription Defines an abbreviation or acronym Defines contact information for the author/owner of a document Defines the text direction Defines a section that is quoted from another source Defines the title of a work Defines a short inline quotation

9 HTML Styles - CSS HTML style attribute for inline styling HTML element to define internal CSS HTML element to refer to an external CSS file HTML element to store and elements CSS color property for text colors CSS font-family property for text fonts CSS font-size property for text sizes CSS border property for visible element borders CSS padding property for space inside the border CSS margin property for space outside the border

10 HTML Links element to define a link href attribute to define the link address target attribute to define where to open the linked document element (inside ) to use an image as a link id attribute (id="value") to define bookmarks in a page href attribute (href="#value") to link to the bookmark

11 target attribute Target ValueDescription _blankOpens the linked document in a new window or tab _selfOpens the linked document in the same frame as it was clicked (this is default) _parentOpens the linked document in the parent frame _topOpens the linked document in the full body of the window framenameOpens the linked document in a named frame

12 HTML Images HTML element to define an image HTML src attribute to define the URL of the image HTML alt attribute to define an alternate text for an image, if it cannot be displayed HTML width and height attributes to define the size of the image CSS width and height properties to define the size of the image CSS float property to let the image float HTML element to define an image-map HTML element to define the clickable areas in the image- map HTML 's element usemap attribute to point to an image- map

13 HTML Table Tags HTML element to define a table HTML element to define a table row HTML element to define a table data HTML element to define a table heading HTML element to define a table caption CSS border property to define a border CSS border-collapse property to collapse cell borders CSS padding property to add padding to cells CSS text-align property to align cell text CSS border-spacing property to set the spacing between cells colspan attribute to make a cell span many columns rowspan attribute to make a cell span many rows id attribute to uniquely define one table

14 TagDescription Defines a table Defines a header cell in a table Defines a row in a table Defines a cell in a table Defines a table caption Specifies a group of one or more columns in a table for formatting Specifies column properties for each column within a element Groups the header content in a table Groups the body content in a table Groups the footer content in a table HTML Table Tags

15 HTML List Tags HTML element to define an unordered list HTML style attribute to define the bullet style HTML element to define an ordered list HTML type attribute to define the numbering type HTML element to define a list item HTML element to define a description list HTML element to define the description term HTML element to define the description data Lists can be nested inside lists List items can contain other HTML elements CSS property display:inline to display a list horizontally

16 Unordered HTML Lists - The Style Attribute StyleDescription list-style-type:discThe list items will be marked with bullets (default) list-style-type:circleThe list items will be marked with circles list-style-type:squareThe list items will be marked with squares list-style-type:noneThe list items will not be marked Ordered HTML Lists - The Type Attribute TypeDescription type="1"The list items will be numbered with numbers (default) type="A"The list items will be numbered with uppercase letters type="a"The list items will be numbered with lowercase letters type="I"The list items will be numbered with uppercase roman numbers type="i"The list items will be numbered with lowercase roman numbers

17 HTML Block and Inline Elements Block-level Elements – A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). – Examples of block-level elements: - Inline Elements – An inline element does not start on a new line and only takes up as much width as necessary. – Examples of inline elements:

18 HTML Classes – Classing Block Elements – Classing Inline Elements HTML Layouts – HTML Layout Using Elements – HTML Layout Using Tables HTML iframe – Syntax:- – Use iframe as a Target for a Link W3Schools.com

19 HTML Forms The element is the most important form element. The element has many variations, depending on the type attribute. Attribute of FORMDescription accept-charsetSpecifies the charset used in the submitted form (default: the page charset). actionSpecifies an address (url) where to submit the form (default: the submitting page). autocompleteSpecifies if the browser should autocomplete the form (default: on). enctypeSpecifies the encoding of the submitted data (default: is url-encoded). methodSpecifies the HTTP method used when submitting the form (default: GET). nameSpecifies a name used to identify the form (for DOM usage: document.forms.name). novalidateSpecifies that the browser should not validate the form. targetSpecifies the target of the address in the action attribute (default: _self).

20 HTML Form Elements TagDescription Defines an HTML form for user input Defines an input control Defines a multiline input control (text area) Defines a label for an element Groups related elements in a form Defines a drop-down list Defines an option in a drop-down list Defines a clickable button

21 HTML Input Types Input type text Input type password Input type radio Input type checkbox Input type button Input type number - with restrictions Input type number - with steps Input type date - with date picker Input type date - with restrictions Input type color - with color picker Input type range Input type month Input type week Input type time Input type datetime Input type datetime-local Input type email Input type search Input type tel Input type url

22 HTML Input Attributes The value Attribute The name Attribute The ID Attribute The readonly Attribute The disabled Attribute The size Attribute The maxlength Attribute


Download ppt "HTML. Basic HTML HTML document – HTML headings – to HTML paragraphs – HTML links – HTML images –"

Similar presentations


Ads by Google