HTML Tag Basics Hello World Start tagEnd tag Self-closing tag Attribute A self closing tag does not need a corresponding end tag. Tags “mark up” the HTML document. The tags are read and interpreted by the browser - but not shown.
ML--Element The start tag and end tag must be paired; note the slash There are elements /texts between the start tag and end tag
ML--Element We have rules regarding the element name and what content it holds You must use specified element name and cannot create your own element The element name is lowercase, generally
ML--Element For element with no content, the start tag and end tag are collapsed into one like. hr means horizontal row, a horizontal line.
Attributes Separated by at least one whitespace Value must be quoted by double quotes A property can have no value Same Property name doesn’t occur twice Attribute identifier contains no special chars such as =,”, etc. Untitled Page 姓名 : 婚否
ML--Content In the starting note and ending note is the content, including other tags and/or plain texts Untitled Page 姓名 : 婚否
ML--Content Redundant space and carriage enter are ignored Note the space before, in and after “ 姓 名 :” Note the newline in “ 婚否 ” is displayed as whitespace If you want to insert some whitespace, or other special chars, such >, you have to…see next slide Untitled Page 姓 名 : 婚 否
Meta name=… Author The value must be a free-form string giving the name of one of the page's authors.
base have either an href attribute, a target attribute, or both, specifyinghreftarget the document base URL for the purposes of resolving relative URLs,document base URLresolving relative URLs the name of the default browsing context for the purposes of following hyperlinks. Thebrowsing contextfollowing hyperlinks There must be no more than one base element per document.base
archives would be a link to http://www.example.com/news/archives.html.http://www.example.com/news/archives.html
The bdi element represents a span of text that is to be isolated from its surroundings for the purposes of bidirectional text formatting. [BIDI]bdirepresents[BIDI] For the purposes of applying the bidirectional algorithm to the contents of a bdi element, user agents must treat the element as a paragraph-level container.bdi For the purposes of applying the bidirectional algorithm to the paragraph-level container that a bdi element finds itself within, the bdi element must be treated like a U+FFFC OBJECT REPLACEMENT CHARACTER (in the same manner that an image or other inline object is handled).bdi
Categories: Flow content. Phrasing content. Palpable content. Contexts in which this element can be used: Where phrasing content is expected. Content model:Phrasing content. Content attributes: Global attributes Also, the dir global attribute has special semantics on this element DOM interface:Uses HTMLElement.
User jcranmer : 12 posts. User hober : 5 posts. User إيان : 3 posts.
The bdo element represents explicit text directionality formatting control for its children. It allows authors to override the Unicode bidirectional algorithm by explicitly specifying a direction override. [BIDI]bdorepresents [BIDI]
anchor for long documents, you can even have links to other locations in that same document … where ident is a variable for identifying this location
Hyperlinks … if the page is accessed over the Web, must start with http:// if not there, the browser will assume it is the name of a local file … causes the page to be loaded in a new Window * Find more info on attribute TARGET
Hyperlinks (cont.) for long documents, you can even have links to other locations in that same document … will then jump to that location within the file … can jump into the middle of another file just as easily
Hyperlinks (cont.) [ HTML | HTTP | IP | TCP ] Computer acronyms: HTML HyperText Markup Language HTTP HyperText Transfer Protocol… IP Internet Protocol… TCP Transfer Control Protocol… Internal links are handled slightly differently in HTML 5. Use the same format to specify the hyperlinks, but use an ‘id’ to define the location of the anchor. This can be applied to (nearly) any HTML element.
1999 Asian Women's Network Training Workshop61 The current HTML document is my.html and the current directory is Iam C:\- Iam -my.html -your.html Type this ; Your link C:\- Iam -my.html Child -your.html Type this ; Your link C:\- Iam -my.html Sister -your.html Type this ; Your link C:\- Mother -your.html Iam -my.html Type this ; Your link How to specify Relative pathnames
and Tags The default meaning of is to leave the content as it is Another tag that is useful for style specifications: Used to create document sections (or divisions) for which style can be specified e.g., a section of five paragraphs for which you want some particular style
64 Lists An ordered list: The first item. The second item. An unordered list with gaps between items: The first item. The second item. The third item.
65 More lists Fancier list: The first item. Sub item one. Sub item two. The second item.
Global Id Title Lang and xml:lang Translate Xml:base(xml only) Dir Class Style
lang specifies the primary language for the element's contents and for any of the element's attributes that contain text. Its value must be a valid BCP 47 language tag, en zh … or the empty string. the primary language is unknown.
translate The attribute's keywords are the empty string, yes, and no. type start. The game will start
dir The dir attribute specifies the element's text directionality.dir ltr rtl auto
data-* Embedding custom non-visible data with the attributes Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.
data-* naming no namespace has at least one character after the hyphen contains no characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z). All attributes on HTML elements in HTML documents get ASCII-lowercased automatically, so the restriction on ASCII uppercase letters doesn't affect such documents.
e.g a site about music could annotate list items representing tracks in an album with custom data attributes containing the length of each track. T his information could then be used by the site itself to allow the user to sort the list by track length, or to filter the list for tracks of certain lengths. Beyond The Sea...
element. Dataset Returns a DOMStringMap object for the element's data-* attributes. Hyphenated names become camel-cased. For example, data-foo-bar="" becomes element.dataset.fooBar