Internet Programming

Lecture 2: HTML , CSS and JavaScript

Internal Linking
Internal Linking
▪Internal linking is a mechanism that enables the user to jump between
locations in the same document.
▪Internal linking is useful for long documents that contain many sections. Clicking
an internal link enables the user to find a section without scrolling through the
entire document.
▪To link to a tag with this attribute inside the same web page, the href attribute
of an anchor element includes the id attribute value, preceded by a pound sign
◦ <a href = "#features">
▪A hyperlink can also reference an internal link in another document by
specifying the document name followed by a pound sign and the id value
◦ <a href = "URL/filename.html#id“>
meta Elements
▪ Search engines catalog sites by following links from page to page (often known as spidering or
crawling the site) and saving identification and classification information for each page.
▪ One way that search engines catalog pages is by reading the content in each page’s meta
elements, which. specify information about a document.
▪ Using the meta element is one of many methods of search engine optimization (SEO)—the
process of designing and tuning your website to maximize your findability and improve your
rankings in organic (nonpaid) search engine results.
▪ Two important attributes of the meta element are name, which identifies the type of meta
element, and content, which provides the information search engines use to catalog pages.
meta Elements (cont.)
▪ The content attribute of "keywords" meta element provides search engines with a list of words
that describe the page. These words are compared with words in search requests. Thus,
including meta elements and their content information can draw more viewers to your site.
▪ The content attribute of "description" meta element provides a three- to four-line description
of a site, written in sentence form. Search engines also use this description to catalog your site
and sometimes display this information as part of the search results.
input Type color
▪ The color input type enables the user to enter a color.
▪ Most browsers render the color input type as a text field in which the user can enter a hexadecimal
code. When the user clicks a color input, browsers will likely display a dialog from which the user can
select a color.
▪ The autofocus attribute is optional attribute that can be used in only one input element on a form to
place the cursor in the text field after the browser loads and renders the page.
▪ The new HTML 5 input types self validate on the client side, eliminating the need to add JavaScript
code to validate user input and reducing the amount of invalid data submitted.
▪ When a user enters data into a form then submits the form, the browser immediately checks that
the data is correct.
▪ If you want to bypass validation, you can add the formnovalidate attribute to input type submit.
▪ Using JavaScript, we can customize the validation process.
input Type date
▪ The date input type enables the user to enter a date in the format yyyy-mm-dd.
▪ The datetime input type enables the user to enter a date (year, month, day), time (hour,
minute, second, fraction of a second) and the time zone set to UTC (Coordinated Universal
Time or Universal Time, Coordinated).
▪ The datetime-local input type enables the user to enter the date and time in a single control.
▪ The date is entered as year, month, day, hour, minute, second and fraction of a second.
input Type email
▪ The email input type enables the user to enter an e-mail address or list of e-mail addresses
separated by commas.
▪ The placeholder attribute allows you to place temporary text in a text field.
▪ The placeholder text is light gray and provides an example of the text and text format the user
should enter. When the focus is placed in the text field (i.e., the cursor is in the text field), the
placeholder text disappears—it’s not “submitted” when the user clicks the Submit button
(unless the user types the same text).
▪ The required attribute forces the user to enter a value before submitting the form.
◦ You can add required to any of the input types. If the user fails to fill enter a required item, a callout
pointing to the empty element appears, asking the user to enter the information.
input Type month
▪ The month input type enables the user to enter a year and month in the format yyyy-mm, such
as 2012-01.
▪ If the user enters a month in an improper format and clicks the Submit button, a callout stating
that an invalid value was entered appears.
input Type number
▪ The number input type enables the user to enter a numerical value.
▪ The min attribute sets the minimum valid number, in this case "0".
▪ The max attribute sets the maximum valid number, which we set to "7".
▪ The step attribute determines the increment in which the numbers increase.
◦ For example, if we set the step to "2", the number in the spinner control will increase or decrease by
two each time the up or down arrow, respectively, in the spinner control is clicked.

▪ The value attribute sets the initial value displayed in the form.
▪ The spinner control includes only the valid numbers. If the user attempts to enter an invalid
value by typing in the text field, a callout pointing to the number input element will instruct the
user to enter a valid value.
range input type
▪ The range input type appears as a slider control.
▪ You can set the minimum and maximum and specify a value.
▪ The slider appears at the value in the range when the HTML5 document is rendered.
▪ The range input type is inherently self-validating when it’s rendered by the browser as a slider
control, because the user is unable to move the slider outside the bounds of the minimum or
maximum value.
input Type tel
▪ The tel input type enables the user to enter a telephone number.
▪ The length and format of telephone numbers varies greatly based on location, making
validation quite complex. HTML5 does not self validate the tel input type.
▪ To ensure that the user enters a phone number in a proper format, you can use the pattern
attribute.
▪ When the user enters a phone number in the wrong format, a callout requesting the proper
format appears, pointing to the tel input element.
input Type
▪ The time input type enables the user to enter an hour, minute, second and fraction of a
second.
▪ The url input type enables the user to enter a URL. The element is rendered as a text field. If
the user enters an improperly formatted URL, it will not validate. HTML5 does not ensure that
the URL entered actually exists.
▪ The week input type (p. 119) enables the user to select a year and week number in the format
yyyy-Wnn.
▪ The autocomplete attribute can be used on input types to automatically fill in the user's
information based on previous input. You can enable autocomplete for an entire form or just
for specific elements.
▪ The datalist element provides input options for a text input element. The browser can use
these options to display autocomplete options to the user.
Cascading Style Sheets (CSS)
▪ Cascading Style Sheets (CSS) allows document authors to
specify the presentation of elements on a web page (e.g.,
fonts, spacing, colors) separately from the structure of the
document (section headers, body text, links, etc.)
▪ The separation of structure from presentation simplifies
maintaining and modifying a web page.
CSS Validation Service
▪ The W3C provides a CSS code validator
▪ https://jigsaw.w3.org/css-validator/
▪ It is a good idea to validate all CSS
code with this tool to make sure that
your code is correct and works on as
many browsers as possible
CSS Rules
▪ The property name is followed by a colon (:) and the value of the property.
▪ Multiple properties are separated by semicolons (;)
Inline Styles
▪ Inline styles declare an individual element’s format using the HTML attribute style.
▪ Inline styles override any other styles.
▪ Inline styles do not truly separate presentation from content.
Inline Styles (cont.)
Embedded Style Sheets
▪ Embedded style sheets embed an entire CSS document in an HTML document’s head section.
▪ Styles placed in the head apply to matching elements wherever they appear in the entire document.
▪ Style classes define styles that can be applied to any element.
Embedded Style Sheets (cont.)
Embedded Style Sheets (cont.)
font-family Property
▪ The font-family property specifies the name of the font to use.
▪ Not all users have the same fonts installed on their computers, so CSS allows you to specify a
comma separated list of fonts to use for a particular style.
▪ The browser attempts to use the fonts in the order they appear in the list. It’s advisable to end
a font list with a generic font family name in case the other fonts are not installed on the user’s
computer.
font-size Property
▪ The font-size property specifies a 12-point font. Other possible measurements in addition to pt
(point) are Relative values.
▪ Relative values— xxsmall, x-small, small, smaller, medium, large, larger, x-large and xx-large.
▪ Generally, relative values for font-size are preferred over point sizes because an author does
not know the specific measurements of the display for each client.
▪ Relative font-size values permit more flexible viewing of web pages.
▪ For example, a user may wish to view a web page on a handheld device with a small screen.
Specifying an 18-point font size in a style sheet will prevent such a user from seeing more than
one or two characters at a time. However, if a relative font size is specified, such as large or
larger, the actual size is determined by the browser that displays the font.
▪ Using relative sizes also makes pages more accessible to users with disabilities.
Conflicting Styles
▪ Styles may be defined by a user, an author or a user agent (e.g., a web browser).
▪ Styles “cascade,” or flow together, such that the ultimate appearance of elements on a page
results from combining styles defined in several ways.
▪ Most styles defined for parent elements are also inherited by child (nested) elements. The
child’s styles take precedence.

Author
User
User
Agent
Conflicting Styles (cont.)
Conflicting Styles (cont.)
External Style Sheets
▪ Style sheets are a convenient way to create a document with a uniform theme.
Positioning Elements
▪ Before CSS, controlling the positioning of
elements in an HTML document was difficult:
the browser determined positioning.
▪ Normally, elements are positioned on the page
in the order that they appear in the
▪ CSS introduced the position property and a
capability called absolute positioning.
▪ Specifying an element’s position as absolute
removes the element from the normal flow of
elements on the page.
Positioning Elements (cont.)
Positioning Elements (cont.)
▪ z-index property used to layer overlapping
elements properly.
▪ Elements that have higher z-index values are
displayed in front of elements with lower z-
index values.
▪ Relative positioning, in which elements are
positioned relative to other elements
Box Model
▪ Box Model: virtual box drawn around the block-level HTML elements.
▪ When the browser renders elements using the box model, the content of each element is
surrounded by padding, a border and a margin.
▪ CSS controls the border-width, border-color and border-style.
BOX Model (cont.)
▪ The margin property sets the space between the outside of the border and all other content on
the page.
▪ The padding property determines the distance between the content inside an element and the
inside of the element’s border.
Media Types
▪ CSS media types allow a programmer to decide what a page should look like
depending on the kind of media being used to display the page.
▪ The media type for a web page
▪ Screen : standard computer screen
▪ Handheld : designed for mobile Internet devices
▪ Braille : for machines that can read or print web pages in braille
▪ Aural : give a speech-synthesizing web browser more information about the content of the
web page. This allows the browser to present a web page in a sensible manner to a visually
impaired person.
▪ Print : affects a web page’s appearance when it is printed.
Media Types (cont.)
User Style Sheets
▪ Users can define their own user style sheets to format
pages based on their preferences.
▪ Absolute font size measurements override user style
sheets, while relative font sizes will yield to a user-
defined style.
▪ User style sheets are set in the browser’s options; not
linked to a document.
JavaScript
Client side scripting
JavaScript
▪ client-side scripting language for web-based applications that enhance the functionality and
appearance of web pages.
▪ JavaScript makes web pages more dynamic and interactive.
▪ All web browsers contain JavaScript interpreters, which process the commands written in
JavaScript.
▪ The JavaScript code can appear in the <head> section. The browser interprets the contents of
the <head> section first, so the JavaScript programs execute before the <body> of the HTML
document displays.
▪ inline scripting : JavaScript code is written in the <body> of an HTML document
JavaScript (cont.)
▪ <script type = "text/javascript">
<!--
script code here
// -->

▪ </script>
Escape sequences
User Input
Arithmetic Operator
Rules of operator precedence
▪ Multiplication, division and remainder operations are applied first. If an
expression contains several multiplication, division and remainder operations,
operators are applied from left to right.
▪ Multiplication, division and remainder operations are said to have the same
level of precedence.
▪ Addition and subtraction operations are applied next. If an expression contains
several addition and subtraction operations, operators are applied from left to
right.
▪ Addition and subtraction operations have the same level of precedence.
Equality and relational operators
Thank You