Skip to content

Simbulele2024/HTML-CSS

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 

Repository files navigation

What is HTML?

  • HyperText Markup Language is the foundation of everything digital as it serves as a channel for different types of content

  • HTML is straightforward as it is a declarative language that gives it it's simplicity.
  • HTML uses tags to markup different elements as it is a language used to structure web pages
  • HTML markup is a bridge or connection between the human world and computers it achieves this by giving meaning to content and helping computers understand it

  • When nesting elements to each other you need to pay attention to how you open and close tags as this helps convey meaning about the content and interface
  • HTML elements marking up headlines come in six different types and they convey a hierarchy in how the browser interprets the page.
  • This hierarchical system is used distingsh what is most important from what is less important, this helps users easily navigate the page
  • Tags come in # HTML-CSStwo types, open < p> and closed< /p> these tags work together to define elements
  • Some paragraphs have an emphasized tag < em> and
  • Headline tags are i hierarchical form for example < h1> to < h6> with h6 being the smallest
  • We use the < p> tag to tell the browser to separate the paragraphs
  • There are two elements for bold and there are two for italic for Bold we use < b> and < strong> and for italic we you < i> and < em>
  • We also use a definition list that uses the tags < dl> but yet for definations that are specific we use different tags like< dt> for defination term
  • For a defination description we use the tags < dd>
  • HTML elements also help us cover qoutes
  • For us to be able to attribute the person who said the words we use < cite> element after doing that we wrap the whole thing up with < blockqoute> element these elements are used for interpretation as they provide a convinient wayto apply customer styling
  • HTML attributes addmore to HTML elements for exsmple datetime attributes allow us to write specific time and date in a way that allows the compute to understand like March 7, 2024.


HTML Capabilities: Troubleshooting and Debugging



  • In HTML involves identifying issues that may arise in your web pages. Validation: ensures your HTML code follows specifications by using online validation services.
  • HTML attributes: are used to define the characteristics of elements. All HTML tags have some attributes along with some default values. The attributes are usually made up of two parts, the name and value (name= "value"). For example, if you want to change the background colour to red, bicolor will be your name and value will be red.


  • Working with Forms and Interactive Elements


  • HTML Form is a section of the document that collects input from the user.
  • A form contains special interactive elements that users use to insert data.
  • The HTML < input> tag defines the field where the user can enter data.
  • type - determines the type of input the tag takes.

    # Types of inputs include text, date, email, button, checkbox etc.


  • HTML Form Action:POST and GET



  • The method attribute in the form element specifies how the data is sent to the server.
  • Using the < action> attribute. define the action to be performed when the form is submitted. It is usually the URL for the server where the form data is to be sent.
  • GET method - used to request data from a specified resource.
  • POST method - used to send data to a server to update a resource.


  • Introduction to CSS.


    CSS is used to make web pages look better and more appealing.
    It stands for Cascading Style Sheets.
    We can style the web pages by changing fonts, colors and spacing.



    CSS synta:



    CSS has two parts:

  • The selector-which points to the html elements you want to style.
  • The declaration box- which contains one or more declarations separated by a semicolon.


  • CSS Selectors

    CSS selectors can be divided into five categories:



  • Simple selectors
  • Combinator selectors
  • Pseudo class selectors
  • Pseudo element selectors
  • Attribute selectors


  • The CSS element selector

    The element selector selects the html elements based on the element name. Here all the

    elements will be center aligned, with a blue text color.

    The CSS Id selector

  • The Id selector selects the html element with specific Id attribute.
  • It is written with the (#) character, followed by the Id of the element.


  • The CSS class selector



  • The CSS class Selector selects the Html elements with a specific class attribute.
  • To select elements with specific class, write a period character (.), followed by the class name.


  • Grouping selectors

  • The group selector is used to select all the elements with the same style definition.
  • Commas are used to separate each selector in grouping.


  • CSS Images & Colours


  • The background-color property sets the background color of an element.
  • It applies to the entire size of the element, including padding and border (but not the margin).
  • To ensure readability, choose a background color that contrasts well with the text color.


  • The syntax for setting the background color


  • Altering the color of the text can add visual interest or align with a specific design scheme.
  • The color property is used to set the color of the text.


  • Understanding Images in CSS


  • JPEG (Joint Photographic Experts Group): It uses lossy compression, meaning that the image quality may be slightly degraded in order to reduce file size.
  • PNG (Portable Network Graphics): PNG images use lossless compression, meaning that image quality is preserved without sacrificing file size.
  • GIF (Graphics Interchange Format): GIF images support transparency and animation, making them popular for memes and social media content.
  • The syntax for setting the back-ground image: body{ background-image:url(‘the.png’); }

    CSS Boxes, Sizes & Types

  • The fonts, height, width, margins, padding, etc. are set on a web page with the length units. For example, height 100px, width 100px, font 2em, etc.
  • These length units are categorised into Absolute and Relative Units.
  • CSS uses a box model to define the size of elements on a web page.


  • Introduction to JavaScript:

  • JavaScript, often abbreviated as JS, was created by Brendan Eich in 1995 while he was working at Netscape Communications Corporation.
  • Initially developed as a scripting language for web browsers to enhance HTML pages with interactivity.

  • Key Features:

  • Client-Side Scripting: Primarily used for client-side web development to make web pages interactive.
  • Versatility: Can be used for both front-end and back-end development (Node.js).
  • Dynamic Typing: Variables are not explicitly typed, allowing flexible data handling.
  • Prototype-based: Object-oriented language where objects inherit properties and methods directly from other objects.
  • Event-Driven: Responds to events triggered by user actions or system events.
  • Asynchronous: Supports asynchronous programming with features like callbacks, promises, and async/await.

  • Syntax:

  • Syntax is similar to C-based languages such as Java and C++, making it relatively easy to learn for programmers familiar with those languages.
  • JavaScript code is executed by web browsers' JavaScript engines.

  • Basic Syntax Examples:

    // Hello World program
    console.log("Hello, World!");

    Data Types:

  • Primitive: Number, String, Boolean, Undefined, Null, Symbol (added in ECMAScript 6).
  • Non-primitive (Reference types): Objects, Arrays, Functions.

  • Control Structures:

  • Conditional Statements: if-else, switch-case.
  • Looping Constructs: for, while, do-while.

  • Functions:

  • JavaScript functions are first-class objects, meaning they can be passed around like any other object.
  • Can be defined using the 'function' keyword or as arrow functions (introduced in ECMAScript 6).

  • Objects and Prototypes:

  • JavaScript is object-oriented, where objects are collections of key-value pairs.
  • Objects can inherit properties and methods from other objects through prototypes.

  • Arrays:

  • Arrays are ordered collections of elements, and they can contain elements of different data types.
  • Various built-in methods are available for array manipulation, such as 'push()', 'pop()', 'slice()', 'map()', 'filter()', etc.

  • DOM Manipulation:

  • Document Object Model (DOM) represents the structure of HTML documents.
  • JavaScript can manipulate the DOM dynamically to change the content, structure, and style of web pages.

  • Event Handling:

    JavaScript can respond to various events such as clicks, keypresses, mouse movements, etc., using event listeners.

    Asynchronous Programming:

    JavaScript supports asynchronous programming to handle tasks that might take some time to complete, such as fetching data from a server or reading files.

    Modules:

  • ECMAScript 6 introduced the concept of modules for organizing and encapsulating JavaScript code.
  • Modules allow for better code organization, reusability, and maintainability.

  • Popular Libraries and Frameworks:

  • Front-end: React.js, AngularJS, Vue.js.
  • Back-end: Node.js, Express.js.
  • Testing: Jasmine, Mocha, Jest.

  • Development Tools:

  • Various integrated development environments (IDEs) and text editors support JavaScript development, including Visual Studio Code, Sublime Text, Atom, etc.
  • Debugging tools like Chrome DevTools are widely used for debugging JavaScript code in web browsers.
  • Introduction to Java

  • Origin: Java was created by James Gosling at Sun Microsystems in 1995. Initially developed for consumer electronics, it quickly found its niche in web development.
  • Name Change: Originally named Oak, it was later renamed Java, inspired by the coffee consumed by the development team.
  • Key Features:

  • Platform Independence: Java programs are compiled into bytecode, which can run on any device with a Java Virtual Machine (JVM). This enables "write once, run anywhere" (WORA) capability.
  • Object-Oriented: Java follows the object-oriented programming paradigm, emphasizing modularity and reusability through classes and objects.
  • Robust: Java's robustness stems from features like automatic memory management (garbage collection), strong type checking, and exception handling.
  • Secure: The Java platform incorporates security features such as bytecode verification and a security manager to protect systems from malicious code.
  • High Performance: Java achieves high performance through Just-In-Time (JIT) compilation, where bytecode is translated into machine code at runtime for efficient execution.
  • Java Virtual Machine (JVM):

  • Execution Environment: JVM provides a platform-independent execution environment for Java bytecode.
  • Memory Management: JVM manages memory allocation and deallocation, including garbage collection.
  • Platform Specific Implementations: Different JVM implementations exist for various operating systems and architectures, ensuring compatibility across diverse environments.
  • Syntax:

  • Java syntax resembles C and C++, making it familiar to programmers from those languages.
  • Every Java application must contain at least one class with a main() method, serving as the entry point for execution.
  • Basic Syntax Examples:

    The "Hello World" program demonstrates the simplest Java syntax, where System.out.println() prints a message to the console.

    Data Types:

  • Primitive Data Types: These include numeric types (byte, short, int, long, float, double), character type (char), and boolean type (boolean).
  • Non-primitive Data Types: Arrays, Strings, and Classes are examples of non-primitive data types.
  • Control Structures:

  • Conditional Statements: Java supports if-else and switch-case statements for decision-making.
  • Looping Constructs: for, while, and do-while loops enable repetitive execution of code blocks.
  • Object-Oriented Programming (OOP):

  • Classes and Objects: Classes define the blueprint for creating objects, encapsulating data and behavior.
  • Inheritance: Subclasses can inherit properties and behaviors from a superclass, promoting code reuse.
  • Polymorphism: Java supports polymorphism, where objects of different classes can be treated interchangeably through method overriding and method overloading.
  • Encapsulation and Abstraction: Encapsulation hides internal state and requires interaction through well-defined interfaces. Abstraction emphasizes essential characteristics while hiding implementation details.


  • What is Python?

    Python is a high-level, general-purpose, and very popular programming language.
    Python programming language (latest Python 3) is being used in web development, and Machine Learning applications, along with all cutting-edge technology in Software Industry.
    Python language is being used by almost all tech-giant companies like – Google, Amazon, Facebook, Instagram, Dropbox, Uber…

    Python Data Types

  • Strings
  • Numbers
  • Booleans
  • Python List
  • Python Tuples
  • Python Sets
  • Python Dictionary
  • Python Arrays
  • Type Casting

  • Strings:

    Strings represent sequences of characters enclosed within single quotes (''') or double quotes ('"').
    message = "Hello, World!"
    print(message) # Output: Hello, World!

    Numbers:

    Python supports various numeric types, including integers, floating-point numbers, and complex numbers.
    x = 10 # Integer
    y = 3.14 # Float
    z = 5 + 2j # Complex

    Booleans:

    Booleans represent truth values, either True or False.
    is_valid = True
    has_error = False

    Lists:

    Lists are ordered collections of items, mutable (modifiable), and enclosed within square brackets ('[]').
    fruits = ["apple", "banana", "cherry"]
    fruits.append("orange")
    print(fruits) # Output: ['apple', 'banana', 'cherry', 'orange']

    Tuples:


    Tuples are ordered collections of items, immutable (cannot be modified), and enclosed within parentheses ('()').
    coordinates = (10, 20)
    x, y = coordinates
    print(x) # Output: 10

    Sets:

    Sets are unordered collections of unique items, enclosed within curly braces ('{}'). Sets do not allow duplicate elements.
    unique_numbers = {1, 2, 3, 4, 5}

    Dictionary:

    Dictionaries are unordered collections of key-value pairs, enclosed within curly braces ('{}'). Keys are unique within a dictionary.

    Arrays:

    Arrays are not built-in data types in Python, but you can use lists or the array module for similar functionality.
    import array
    nums = array.array('i', [1, 2, 3, 4, 5]) # 'i' denotes integer type

    Type Casting:

    Type casting is the process of converting one data type into another.
    num_str = "10"
    num_int = int(num_str) # Convert string to integer

    About

    No description, website, or topics provided.

    Resources

    Stars

    Watchers

    Forks

    Releases

    No releases published

    Packages

    No packages published