Untitled

• The text is on HTML Images, Linking and Iterative Statements in Python

Specifying Height and Width for Images

• The 'height' attribute specifies the height of an image in pixels or as a percentage.
• The 'width' attribute specifies the width of an image in pixels or as a percentage.
• CSS property-float aligns an image to the right or left of text.
• The CSS property vertical-align aligns an image to the top, bottom, or middle.
• The align attribute was used in previous versions of HTML to align images to the left or right.

ALT Attribute

• The ALT attribute specifies alternate text for an image if it cannot be displayed.
• Reasons include slow connection or errors in the src attribute of the <img> tag.
• The ALT attribute provides a description of the image.
• The attribute is a text string of up to 1024 characters.
• Requires quotation marks if spaces or punctuation are included.

Images in a Table Cell

• Images can be inserted into table cells.
• HTML code is required that defines the table structure.
• It specifies the image source, and sets table border styles.
• The image path should be valid or the ALT text will be presented.

Linking Web Pages

• A website consists of a number of web pages that provide access to HTML information.
• HTML offers a linking feature that allows you to link web pages together, which is called Hyperlinking.
• Hyperlinks enable the user to open any linked web page on the internet quickly
• When hovering over a link, the mouse pointer turns into a hand icon.

Types of Linking

• Internal linking links one part of a web page to another section on the same page.
• External linking links one page to another web page or website.
• The Anchor Tag <a> is used to mark text as a hyperlink.
• The tag requires a closing tag </a> to mark the end of the text or image.
• Can link to activate, and open another address using the defined link.
• Can also be used or jump between section or to a different website
• The HREF attribute defines the document to which the link leads.
• The syntax is CLICK HERE where value can be:
  • An absolute URL that points to another website.
  • A relative URL that points to a file within a website
  • A link to an email address.
• "CLICK HERE" is called Hypertext, which contains links to information (text, graphics or media) on the same web page.
• Browsers display hypertext as underlined and colored.

CSS and Links

• CSS affects links differently depending on their state.
• Link states are:
  • a:link (normal, unvisited link)
  • a:visited (link the user has visited)
  • a:hover (link when the user moves the mouse over it)
  • a:active (link the moment it is clicked)
• Link states can be customized by applying text properties and colors to them.
• Set the style for several link states in one single statement, maintaining specific order.
• a:hover must come after a:link and a:visited, and a:active must come after a:hover

Links as Buttons

• Links can be displayed as buttons using CSS styling.
• The code sets the background and text color, padding, alignment, and removes text decoration.
• Hovering over or activating the button changes the background color using a:hover and a:active.

Images as Links

• Images can be used as a hyperlink to another document.

Inserting Audio

• HTML5 defines a new \ tag to insert an audio file in a web page.
• It is compatible with formats .mp3, .ogg, .wav.
• The attributes of \ tag are:
  • src (specifies the URL of the audio file)
  • controls (displays audio controls)
  • autoplay (plays the audio file automatically)
  • loop (replays the audio file)

Inserting Video

• Video files are inserted in HTML pages using the \ tag.
• Supported file formats are .mp4, .webm, and .ogg.
• Attributes associated with the \ tag are:
  • src (specifies the URL of the video file)
  • controls (displays the video controls)
  • autoplay (automatically plays the video file)
  • height (specifies the height of the video player)
  • width (specifies the width of the video player)

Frames

• HTML documents can take up the entire browser window but can display more at once.
• The concept of Frames (using <iframe> tags) enables to divide pages and organize sites.
• Frames allow multiple HTML documents to appear as independent windows within one larger browser window.
• Makes sites interesting with themes, logos, and banners alongside changing page contents.
• Create a new HTML document embedded inside of the current one.
• The attributes of the <iframe> tag are:
  • SRC: Specifies the path of the document to display.
  • HEIGHT & WIDTH: Control the size of the inline frames.

Border and IFrame

• The CSS property Border displays an inline frame with or without a border.
• Individual border properties are also specifiable.
• border-width (value can be thin, thick, medium, or a numeric pixel value)
  • border-style (value can be none, hidden, dotted, dashed, solid, double, groove, ridge, inset, or outset)
  • border-color (value can be a color name or a hexadecimal code)

Iterative Statements in Python

• Iterative statements are also called loops.
• Loops let programs repeat statements, which can be carried out using loops in programming.
• There are a few examples of loops that were used in real life:
  • Running around and taking five rounds of the playground to warm up.
  • Increment control variable when control variable is checked against the max number of repetitions
• Looping with 3 values:
  • Start value(initial), e.g. C=0
  • Test Condition, e.g., C<=5
  • Step Value (incr/decr), e.g. C+1
• The code is shorter and more useful than other methods.

The 'in' Operator

• The 'in' operator checks if a value is in a sequence, and returns True or False.
  • True if the value is inside the loop, False otherwise.
• Used with membership operators and for loops.

For Loop

• The for loop is used when the number of iterations is known
• Also known a definite loop because its is used to iterate with functions and operations.
• Syntax:

for <variable> in <sequence>:
    loop body
for <variable> in range (initial value, final value, step value):
    loop body

• The in operator checks value in a list and returns True if the value is inside, allowing loop variable I to assign values.
• Every time the in operator is True, the value is updated to variable I.

Using range() Function in For Loop:

• The function generates a sequence of numbers.
• range(10) generates "10 numbers" starting from 0-9.
• range(initial, final, step) are passed as, initial value is where to the function starts and final is the end, specifying either incr/decr to reach val.
• Code will only print sequence until range is True.
• The code is a new example that assigns new values from a specific range every time the for loop operates.

While Loop

• The simplest of all of the looping structures.
• Can be applied to a program to be applied when iterations are not known beforehand.
• The while is kept on executing when a test condition evaluates to be True.
• A True result will keep the loop operated.
• the loop has four main components:

1. The initial value for the loop.
2. Testing for if the loop body will continue or not.
3. The body: the set of statements that iterates or repeats.
4. The step value increments for the loop.

• Initial Value is assigned to the control loop so the loop variable can execute smoothly.
• Incrementing the variable must mean reaching termination.
• The code can be expressed as an initial, condition, loop, and updating parameters.

Infinite Loop

• An infinite loop is the sequence of instructions in a computer program loops on end.
• Results from the loop having no terminating condition, and will never met any conditions to stop.