Introduction to MATLAB/SciLab/Web Design (IT-406) - Unit 2 Short Notes

UNIT 2: Core Programming & Web Fundamentals

A. MATLAB / SciLab: Data Visualization & Scripting

1.0 2D Plotting Fundamentals

• 1.1 Basic plot() function: Creates 2D line graphs.

  • Syntax: plot(x, y) where x and y are vectors of same length.

  • Customization: Line style (-, --, :, -.), color (r, g, b, k, etc.), marker (o, +, *, s).

  • Example: plot(x, y, 'r--o') plots a red dashed line with circle markers.

• 1.2 Labeling:

  • xlabel('text'), ylabel('text') – label axes.

  • title('text') – add plot title.

  • legend('label1', 'label2', ...) – create legend for multiple plots.

• 1.3 Axis control:

  • axis([xmin xmax ymin ymax]) – set manual axis limits.

  • xlim([min max]), ylim([min max]) – set individual axis limits.

  • grid on / grid off – toggle grid visibility.

• 1.4 Multiple plots:

  • hold on / hold off – superimpose multiple plots on same axes.

  • subplot(m, n, p) – create m x n grid of subplots, with p as current active plot.

[!TIP] Exam Focus: Be prepared to write a single command sequence to plot multiple datasets with distinct styles, add labels, a title, and a legend.

2.0 Specialized 2D Plots

3.0 3D Plotting

• 3.1 3D line plots: plot3(x, y, z) – plots a 3D line through points (x(i), y(i), z(i)).

• 3.2 Surface & Mesh plots:

  • surf(X, Y, Z) – surface plot (colored faces, shows solid surface).

  • mesh(X, Y, Z) – wireframe mesh plot (grid lines only).

  • contour(X, Y, Z) – contour plot (2D projection with level curves).

  • X, Y, Z must be matrices of same size, typically from meshgrid.

• 3.3 View control: view(azimuth, elevation) or view([x y z]) – set 3D viewing angle. xlabel3, ylabel3, zlabel3 (SciLab) or xlabel, etc. (MATLAB) for 3D axis labels.

[!TIP] Key Difference: surf shows a solid colored surface; mesh shows only the wireframe.

4.0 Scripting & Flow Control

• 4.1 Script files: Save commands in a .m (MATLAB) or .sce (SciLab) file. Run by typing filename (without extension) in command window.

• 4.2 Conditional Statements:

  
  if condition1
  
      % code
  
  elseif condition2
  
      % code
  
  else
  
      % code
  
  end
  
  

  
  switch expression
  
      case value1
  
          % code
  
      case value2
  
          % code
  
      otherwise
  
          % code
  
  end
  
  

• 4.3 Loops:

  • for loop: for i = start:step:end ... end – definite iteration.

  • while loop: while condition ... end – indefinite iteration until condition false.

  • break – exits the innermost loop immediately.

  • continue – skips remaining code in current loop iteration, proceeds to next.

5.0 Basic Data Import/Export & File I/O

• 5.1 Importing:

  • load filename.mat – loads variables from MAT-file.

  • importdata('file.csv') or readmatrix('file.csv') – imports numeric/text data from delimited text files.

• 5.2 Exporting:

  • save filename.mat var1 var2 – saves variables to MAT-file.

  • csvwrite('file.csv', matrix) or writematrix(matrix, 'file.csv') – writes numeric matrix to CSV.

• 5.3 Formatted output: fprintf(formatSpec, A1, A2, ...)

  • Writes formatted data to file or command window.

  • Common specifiers: %f (float), %d (integer), %s (string), \n (newline).

  • Example: fprintf('The value is %.2f\n', x) prints x with 2 decimal places.

B. Web Design: HTML & CSS Foundations

1.0 HTML Document Structure & Essential Elements

• 1.1 DOCTYPE: <!DOCTYPE html> – declares HTML5 document.

• 1.2 Core Structure:

  
  <html>
  
    <head>...</head>
  
    <body>...</body>
  
  </html>
  
  

• 1.3 Metadata (in <head>):

  • <title>Page Title</title> – browser tab title.

  • <meta charset="UTF-8"> – character encoding.

  • <link rel="stylesheet" href="styles.css"> – link external CSS.

  • <script src="script.js"></script> – link/embed JavaScript.

• 1.4 Text Formatting:

  • Headings: <h1> (largest) to <h6> (smallest).

  • Paragraph: <p>text</p>.

  • Lists: Unordered <ul><li>...</li></ul>, Ordered <ol><li>...</li></ol>.

  • Inline: <strong> (bold), <em> (italic), <span> (generic inline container).

2.0 HTML Content Grouping & Semantic Markup

• 2.1 Semantic Elements (HTML5): Define document structure/meaning.

  • <header> – introductory content/logo.

  • <nav> – navigation links.

  • <main> – primary content (unique per page).

  • <section> – thematic grouping of content.

  • <article> – independent, self-contained content.

  • <footer> – footer content.

  • <aside> – tangential content (sidebar).

• 2.2 Grouping: <div> – generic block container (non-semantic). Use semantic tags when they describe the content's purpose.

• 2.3 Hyperlinks: <a href="url">link text</a>.

  • href="#section-id" – link to internal anchor (element with id="section-id").

  • target="_blank" – open link in new tab.

3.0 HTML Media & Tabular Data

• 3.1 Images: <img src="path/to/image.jpg" alt="description" width="300" height="200">.

  • alt attribute is mandatory for accessibility.

• 3.2 Tables:

  
  <table>
  
    <tr> <!-- Table Row -->
  
      <th>Header</th> <!-- Table Header -->
  
      <td>Data</td> <!-- Table Data -->
  
    </tr>
  
  </table>
  
  

  • colspan="n" – cell spans n columns.

  • rowspan="n" – cell spans n rows.

4.0 CSS Fundamentals: Styling & Selectors

• 4.1 Ways to Apply CSS:

  1. Inline: style="property: value;" in HTML tag (least maintainable).

  2. Internal: <style> selector { property: value; } </style> in <head>.

  3. External (Best Practice): Separate .css file linked in <head>.

• 4.2 CSS Syntax: selector { property: value; }

• 4.3 Basic Selectors:

  • Element: p (all <p> tags).

  • Class: .className (all elements with class="className").

  • ID: #idName (element with id="idName" – unique per page).

  • Universal: * (all elements).

• 4.4 Text Styling:

  • color: #RRGGBB; or color: name;

  • font-family: Arial, sans-serif;

  • font-size: 16px; or 1.2em;

  • font-weight: bold; or 700;

  • text-align: left/center/right/justify;

5.0 The Box Model & Layout Basics

• 5.1 The Box Model: Every element is a rectangular box.

  
  [Margin] (transparent)
  
    [Border]
  
      [Padding] (background color)
  
        [Content] (text, image)
  
  

  • Total width = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right.

• 5.2 display property:

  • block – starts on new line, takes full width (e.g., <div>, <p>).

  • inline – flows with text, no width/height (e.g., <span>, <a>).

  • inline-block – flows inline but can have width/height.

• 5.3 box-sizing: border-box; – Crucial for layout. Includes padding and border in the element's declared width and height. Prevents unexpected expansion.

• 5.4 Basic Positioning:

  • position: static; (default) – normal flow.

  • position: relative; – offset from normal position.

  • position: absolute; – removed from flow, positioned relative to nearest positioned ancestor.

  • float: left/right; – allows text/inline elements to wrap around element (introductory).

6.0 CSS for Lists, Links, and Tables

• 6.1 Styling Lists:

  • list-style-type: disc/circle/square/decimal/...;

  • Remove bullets: list-style-type: none; on <ul>/<ol>.

• 6.2 Styling Links (Pseudo-classes):

  
  a:link { color: blue; }     /* Unvisited */
  
  a:visited { color: purple; } /* Visited */
  
  a:hover { color: red; text-decoration: underline; } /* Mouse over */
  
  a:active { color: yellow; } /* Being clicked */
  
  

  • Order matters: :hover should come after :link and :visited.

• 6.3 Styling Tables:

  • border-collapse: collapse; – merges adjacent borders.

  • padding: 8px; on td, th – space inside cells.

  • Alternating rows: tr:nth-child(even) { background-color: #f2f2f2; }

C. Integration & Application (Common to Both Tracks)

1.0 Problem-Solving Workflow

• Interpret: Break down requirements. For MATLAB: Identify x/y data, plot type. For Web: Identify content structure and required styling.

• Select: Choose correct function (plot, bar, surf) or HTML tag (<section>, <table>) / CSS property (flex, grid – if covered) for the task.

2.0 Debugging & Validation

• MATLAB/SciLab:

  • Read error messages – they indicate file/line number and error type.

  • Use disp(variable) or echo on to trace variable values and script execution.

• Web Design:

  • Browser Developer Tools (F12): Use Inspector to:

    • View live HTML structure.

    • See applied CSS rules and computed styles.

    • Test changes in real-time.

    • Identify layout issues (box model visualization).

3.0 File Organization

• Create a dedicated project folder.

• MATLAB/SciLab: Separate scripts/, data/, figures/.

• Web Design: Separate index.html, css/styles.css, js/script.js, images/.

• Use relative paths for linking files (e.g., href="css/styles.css").

[!TIP] Common Pitfall: Forgetting to set box-sizing: border-box; in CSS leads to layout breakage when adding padding/borders. Always include it in your global reset: * { box-sizing: border-box; }.