HTML, HTML5, XHTML, CSS and JavaScript

HTML

• Hypertext Markup Language, a computer language specifying web page structure and content.
• Used to create web pages that display correctly on various devices.
• Supports creating dynamic web pages with JavaScript and CSS for styling.

HTML5

• Emerging version of HTML, building on earlier versions.
• Supports more complex and interactive web pages.
• Provides features for structuring and presenting content effectively across diverse devices.

XHTML

• Stricter version of HTML based on XML.
• Focuses on proper syntax and structure.
• Aims to improve compatibility and accessibility.

CSS

• Cascading Style Sheets, controlling presentation and visual appearance of web page elements.
• Allows styling web pages independently of their content.
• CSS3 is the current, actively developed version.

JavaScript

• Dynamically modifies web pages and creates applications that run within the browser.
• Helps create interactive and responsive web experiences.
• Standardized by ECMA International as ECMA Script.

Internet Technologies

• HTML5, CSS3, and JavaScript enable consistent display across different browsers.
• jQuery is a popular JavaScript library for web page manipulation.
• Web page design and application development can be challenging due to varying browser versions and capabilities.

Internet Infrastructure

• Protocols like TCP/IP enable reliable communication and message delivery on the internet.
• Packet switching and IP addresses enable efficient routing of data packets.
• HTTP is a common protocol for transferring data between web servers and clients.

Web 2.0

• Focuses on collaborative, interactive web applications.
• Uses technologies like AJAX and Javascript for dynamic features.

Programming Languages

• C, C++, Objective-C, Visual Basic, Visual C#, Java, PHP, Python, JavaScript, Ruby on Rails, and Scala are common programming languages used to build applications.
• C/C++ are used for low level programming.
• Python is a high-level scripting language.

Programming paradigms

• Object-oriented programming.
• Functional programming.
• Interpreted versus Compiled.

CHAPTER 2 HTML5 HTML5 – markup language that specifies the structure and content of documents. HTML5 Techniques:

• Tables – structuring information from databases.
• Forms – collecting information from visitors.
• Internal linking – easier page navigation.
• Meta elements – specifying information about a document. DOCTYPE – Document Type Declaration, required in html5 documents so that browsers render the page in standards mode. Comments – to improve readability and describe the content of a document. Head section – information about the HTML5, such as the character set (UTF-8) and the title. Body section – contains the page content, which the browser displays when the user visits the web page. Start tag – element in angle brackets. End tag – element preceded by a forward slash. Title element – called nested element, enclosed in the head element’s start and end tags. Paragraph element – text placed between

  and

  . Heading elements – specifying the relative importance of information (h1 is most significant). Hyperlink – references or link to other resources such as HTML documents and images (browsers typically underline text hyperlinks and color them blue). Strong element – indicates that the content has high importance, render such text in a bold font. Anchor – used to create links. Attribute - hypertext reference, specifies a resource’s location. mailto::URL – to link to an e-mail address. PNG and JPEG – most popular image formats used by web developers. Img element’s src attribute – specifies an image’s location. Alt attribute – makes web pages more accessible to users with disabilities, especially vision impairments (when the browser is not able to render the image). Width and height – optional attributes, adjust images and are measured in pixels. Void elements – attributes and do not mark up text. < />. Unordered list element
  - list in which each item in the list begins with a bullet symbol (disc). Nested lists – represent hierarchical relationships, as in a multi- level outline. Ordered list element
  - list in which each item begins with numbers.

  Tables

  • used to organize data into rows and columns.
  • Can be split into three distinct sections:
  1. Head - table titles, column headers.
  2. Body - primary table data.
  3. Table foot - footnotes, calculation results, displays at the bottom in the page. Summary attribute – summarizes the table’s contents and is used by speech devices to make the table more accessible to users with visual impairments. Caption element – specifies a table’s title.
  element – table rows. element – table data. and - used to merge data cells.
  element – line break.

  ---

  element – legacy formatting element (displays a horizontal line). Forms – provides forms for collection information from users, can contain visual and non-visual components. Visual components – clickable buttons and other GUI components which users interact. Non-visual components – called hidden inputs, store any data that you specify, such as e-mail addresses, and HTML5 document file names. Method attribute – specifies how the form’s data is sent to the web server. Action attribute – specifies the script to which the form data will be sent. Input elements – specify data to provide to the script that processesthe form (aka, form handler) and is determined by its type attribute. Text input Element – inserts a text field into the form, which allows the user to input data. Label Element – provides users with information about the input element’s purpose. Size attribute – specifies the number of character visible in the text field. maxlength – optional attribute, limits that number of characters input into a text field. Submit input element – a button, sends the form data to the location specified in the form’s action attribute. Value attribute – sets the text displayed on the button. Reset input element – allows user to reset all form elements to the default values. Textarea elements – inserts a multiline text area into the form. rows attribute – number of rows. cols attribute – number of columns. Password input – inserts a password box into a form. Checkbox input – enables users to select and option. Radio buttons – only one radio button in a group can be selected at any time. Select input – provides a drop-down list of items. id attribute set – uses the syntax #id, to link internally to an element. Name attribute – identifies the type of meta element. Content attribute - Of a keywords meta element – provides search engines with a list of words that describe a page. - Of a description meta element – provides a 3 to 4 line description of a site in sentence form.